Question

当我点击按钮＆＃34;添加P2＆＃34;。

时，我想在id = p1和id = p3之间添加一个p标签。

谢谢

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

一个简单的jQuery解决方案是使用.insertAfter：

function addParagraphs() {
    var p2 = "<p>paragraph 2</p>";
    $(p2).insertAfter("#p1");
}

JSFIDDLE

Answer 4

 <!DOCTYPE html>
 <head lang="en">
    <meta charset="UTF-8">
     <title></title>
 </head>
 <html>

 <body>
 <script>
     function addParagraphs()
     {
         var para = document.createElement("p");
         var node = document.createTextNode("paragraph 2");
         para.appendChild(node);
         var element = document.getElementById("p2");
         element.appendChild(para);
      }
  </script>
  <p id ="p1" > paragraph 1</p>
  <p id="p2"> </p>
  <p id ="p3" > paragraph 3</p>
  <p id ="p4" > paragraph 4</p>
  <input id="b2" type='button' onclick='addParagraphs()' value='Add P2'/>

 </body>
 </html>

Answer 5

var p1 = document.getElementById('para1');
var p2 = document.createElement('p');

p2.innerText= "Para 2";
p2.setAttribute('id', 'para2');
p1.append(p2)

Answer 6

function addPtag(){
    var x = document.createElement("p");
    var y = document.createTextNode("paragraph content");
    x.appendChild(y);
    document.body.appendchild(x);
}

动态创建<p>标签</p>

6 个答案: