动态创建一个 <p> 标签

Question

单击“添加 P2”按钮时，如何在 id=p1 和 id=p3 之间添加 p 标签？

这是我到目前为止的代码。

 function addParagraphs()
{
    var p2 = "<p>paragraph 2</p>";
    document.getElementsById("p1").appendChild(p2);
}

 <p id ="p1" > paragraph 1</p>
<p id ="p3" > paragraph 3</p>
<p id ="p4" > paragraph 4</p>
<input id="b2" type='button' onclick='addParagraphs()' value='Add P2'/>

原文由 gkmohit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最简单的解决方案是使用 insertAdjacentHTML 方法，该方法对于 HTML 字符串的操作非常方便：

 function addParagraphs() {
    var p2 = "<p>paragraph 2</p>";
    document.getElementById("p3").insertAdjacentHTML('beforebegin', p2);
}

 <p id="p1">paragraph 1</p>
<p id="p3">paragraph 3</p>
<p id="p4">paragraph 4</p>
<input id="b2" type='button' onclick='addParagraphs()' value='Add P2' />

另一种选择是使用 insertBefore 方法，但它有点冗长：

 function addParagraphs() {
    var p2 = document.createElement('p');
    p2.innerHTML = 'paragraph 2';
    var p3 = document.getElementById("p3");
    p3.parentNode.insertBefore(p2, p3);
}

 <p id="p1">paragraph 1</p>
<p id="p3">paragraph 3</p>
<p id="p4">paragraph 4</p>
<input id="b2" type='button' onclick='addParagraphs()' value='Add P2' />

原文由 dfsq 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你打错了。它是 getElementById ，而不是 getElementsById 。同一个ID只能获取一个元素。

您应该使用 createElement 和 insertBefore 在其他两个元素之间插入元素， appendChild 附加 到 元素。

 function addParagraphs() {

    var p2 = document.createElement('p');

    p2.innerHTML = "paragraph 2";

    var elem = document.getElementById("p1");

    elem.parentNode.insertBefore(p2, elem.nextSibling);

}

 <p id ="p1" > paragraph 1</p>
<p id ="p3" > paragraph 3</p>
<p id ="p4" > paragraph 4</p>
<input id="b2" type='button' onclick='addParagraphs()' value='Add P2'/>

原文由 adeneo 发布，翻译遵循 CC BY-SA 4.0 许可协议