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

Question

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

希望使它尽可能动态。

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>

标签： javascriptdom-eventsdom-manipulation

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>