动态创建 <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'/>

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只能获取一个元素

并且您应该使用 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

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

Answer 6

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

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

动态创建 <p> 标签

Create a <p> tag dynamically

html

javascript

dom