如何将每个项目放入 p 标签 + 最后清除 innerHTML

Question

我似乎无法正确地弄清楚如何做到：向每个索引添加一个 p 标记 && 一旦它到达数组末尾就清除所有文本的元素。在这一点上，我尝试了各种方法，但似乎只得到了我想要的结果的一部分。

希望让它尽可能动态化。

const myText = ['hi there', 'my friend', 'how are you', 'today', '?']
let i = 0

function createModal(buttonId) {
  buttonId.addEventListener('click', function() {
    let textNode = document.createTextNode(
      myText[i] == undefined ? "" : myText[i], i++)


    document.getElementById('append').appendChild(textNode)
  })
}


createModal(test)

<button id="test" type='button'>(keep clicking)</button>
<div id="append"></div>

Answer 1

我的英语不好，但也许这就是你想要的

const myText = ['hi there', 'my friend', 'how are you', 'today', '?'];
let i = 0;

 function createModal(buttonId) {
    buttonId.addEventListener('click', function(){
        let textNode = document.createTextNode(myText[i] == undefined ? "" : myText[i], i++)
        if(i>myText.length){document.getElementById('append').innerHTML = "";}
        
        let pTagNode = document.createElement("p");
        pTagNode.appendChild(textNode);
        document.getElementById('append').appendChild(pTagNode);
    })
 }


 createModal(test)

<button id="test" type='button'>(keep clicking)</button>
<div id="append"></div>

如果你想让它重新开始，你可以使用这个

const myText = ['hi there', 'my friend', 'how are you', 'today', '?'];
let i = 0;

 function createModal(buttonId) {
    buttonId.addEventListener('click', function(){
        let textNode = document.createTextNode(myText[i] == undefined ? "" : myText[i], i++)
        if(i>myText.length){document.getElementById('append').innerHTML = "";i=0;}
        
        let pTagNode = document.createElement("p");
        pTagNode.appendChild(textNode);
        document.getElementById('append').appendChild(pTagNode);
    })
 }


 createModal(test)

<button id="test" type='button'>(keep clicking)</button>
<div id="append"></div>

Answer 2

据我了解，如果数组达到限制，您想删除所有段落文本，直到那时您想添加一个包含文本的段落元素 div
这是您更新后的代码

    const myText = ['hi there', 'my friend', 'how are you', 'today', '?']
    let i = 0

    function createModal(buttonId) {

        buttonId.addEventListener('click', function () {
            if (i == myText.length) {
                const requiredElement = document.getElementById('append');
                requiredElement.replaceChildren();
                i = 0;
                return;
            }
            let paragraphElement = document.createElement('p');
            paragraphElement.textContent = myText[i];
            document.getElementById('append').appendChild(paragraphElement);
            ++i;
        });
    }

    createModal(test);

    <button id="test" type='button'>(keep clicking)</button>
    <div id="append"></div>

Answer 3

我不确定你所说的“最后是清晰的 innerHTML”是什么意思，但是要附加 <p></p> 而不仅仅是文本，你只需要使用 document.createElement

const myText = ['hi there', 'my friend', 'how are you', 'today', '?']
let i = 0

 function createModal(buttonId) {
    buttonId.addEventListener('click', function(){
        let textNode = document.createTextNode(
            myText[i] == undefined ? "" : myText[i], i++)
        
        let pNode = document.createElement("p"); // Create a <p> node
        pNode.appendChild(textNode); // Put your text node inside the <p> node

        
        document.getElementById('append').appendChild(pNode)
    })
 }


 createModal(test)

<button id="test" type='button'>(keep clicking)</button>
<div id="append"></div>

Answer 4

这是你想做的吗？只要 i 小于 5，即 myText 数组的长度，它就会创建代码。

const myText = ['hi there', 'my friend', 'how are you', 'today', '?']
    let i = 0

    function createModal(buttonId) {
      buttonId.addEventListener('click', function () {
        if (i < myText.length) {
          let textNode = document.createTextNode(
            myText[i] == undefined ? "" : myText[i], i++)

          const p = document.createElement('p');
          p.appendChild(textNode);

          document.getElementById('append').appendChild(p);
        }

      });
    }

    createModal(test)

  <button id="test" type='button'>(keep clicking)</button>
  <div id="append"></div>

如何将每个项目放入 p 标签 + 最后清除 innerHTML

How to put each item into p tag + clear innerHTML at end

javascript

dom-manipulation

dom-events