Javascript 动态创建 <p> 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28786632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a <p> tag dynamically
提问by gkmohit
I want to add a p tag in between id=p1 and id=p3 when I click the button "Add P2".
当我单击“添加 P2”按钮时，我想在 id=p1 和 id=p3 之间添加 ap 标签。
Thank you
谢谢
Here is the code I have so far.
这是我到目前为止的代码。
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'/>采纳答案by dfsq
The simplest solution is to use insertAdjacentHTMLmethod which is very convenient for manipulations with HTML strings:
最简单的解决方案是使用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' />Another option is to use insertBeforemethod, but it's a bit more verbose:
另一种选择是使用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' />回答by adeneo
You have a typo, it's getElementByIdnot getElementsById, only one single element can be gotten with a certain ID.
你有一个错字，它getElementById不是getElementsById，只有一个元素可以得到一个特定的 ID。
And you should be using createElementand insertBefore to insert the element between the two other elements, appendChildappends tothe element
并且您应该使用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'/>回答by Harijoe
回答by sharjeel
<!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>
回答by Indrakant
var p1 = document.getElementById('para1');
var p2 = document.createElement('p');
p2.innerText= "Para 2";
p2.setAttribute('id', 'para2');
p1.append(p2)
回答by Vignesh Chandran
function addPtag(){
var x = document.createElement("p");
var y = document.createTextNode("paragraph content");
x.appendChild(y);
document.body.appendchild(x);
}
