动态创建<p>标签

Question

当我点击"添加P2"按钮时,我想在id = p1和id = p3之间添加ap标签.

谢谢

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

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'/>

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' />

Answer 2

你有一个拼写错误,它getElementById不是getElementsById,只有一个元素可以获得一定的ID.

并且您应该使用createElementinsertBefore将元素插入到其他两个元素之间,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'/>