Question

现在已经坚持了一段时间，尝试将多个新的p元素添加到div中，但它只是将内容添加到第一个而不是创建新内容。

var p = document.createElement("p");
var output = document.getElementById('output');

按下按钮时的功能

p.appendChild(document.createTextNode("hello"+"\n"));
output.appendChild(p);

感谢您提前提供任何帮助，我需要一个解决方案，我可以获得无限量的新段落，直到满足条件。

Answer 1

问题是您只创建了一个段落，但在其中附加了多个文本节点。尽管它看起来如何，output.appendChild(p)不会追加初始p多一次。实际上，如果元素已经在DOM中（就像第一次单击时的情况一样），appendChild只是将元素移动到新位置。但在您的情况下，新位置与原始位置相同。因此，您只需在每次点击时创建新的文本节点。

您需要在每次点击时创建新的HTMLParagraphElement：

document.querySelector('button').onclick = function() {
    var p = document.createElement("p");
    var output = document.getElementById('output');
    p.appendChild(document.createTextNode("hello"+"\n"));
    output.appendChild(p);
};

<button>Click</button>
<div id="output"></div>

附加新段落

1 个答案: