JavaScript：将同一文本附加到HTML中的多个标记

我是JS的学习者，并且正在学习我试图在html的多个标记中追加相同的文本。例如，如果我有一个“H1”标签，我想里面多个HTML代码中插入像头，节，条，第等JavaScript：将同一文本附加到HTML中的多个标记

我想通过JS做，但这样做时它发生，如果我追加在多个标记中的两个不同的文本正常工作由此可以看出通过点击按钮2文本与颜色：红色获取p标签追加使用id =“输出” &其他文字在p标签id =“output2”

但同时点击按钮1我正在追加两个p标签相同的文字，但它只是变得追加与ID =“输出2”p标签。

这是什么原因？

注：

虽然我说我要到文本追加，但我最初的想法是，为什么我创造元素，然后文本节点，然后在HTML追加它由JS这就是完全做到这一点

function temp() { var h1 = document.createElement("h1"); var text = document.createTextNode("Heading 1"); h1.appendChild(text); var h2 = document.createElement("h2"); var text2 = document.createTextNode("Heading 2"); h2.appendChild(text2); document.getElementById("output").appendChild(h1); document.getElementById("output2").appendChild(h2); } function main() { var h1 = document.createElement("h1"); var text = document.createTextNode("Heading 1"); h1.appendChild(text); document.getElementById("output").appendChild(h1); document.getElementById("output2").appendChild(h1); }

<!DOCTYPE html> <html> <head> <style> #output { color: red; } </style> </head> <title> XYZ </title> <body> <button onclick="main()">Button 1</button> <button onclick="temp()">Button 2</button> <p id="output"> </p> <p id="output2"> </p> </body> </html>

来源

2016-12-26 Mehul Chachada

这是因为在主函数的第二次调用的appendChild（）从第一p元件移动元件TH第二个p元素。

此代码

var h1 = document.createElement("h1"); 
var text = document.createTextNode("Heading 1"); 
h1.appendChild(text); 

document.getElementById("output").appendChild(h1); 
document.getElementById("output2").appendChild(h1);

先添加H1在输出p元素和下一行移动这种h1元素到OUTPUT2 p元素。

你可以通过注释第二行来确认，你会看到红色文本中的标题1，告诉你h1首先被添加到这个p元素上。

你需要创建2个节点，以获得期望的结果。

function temp() { 
 
     var h1 = document.createElement("h1"); 
 
     var text = document.createTextNode("Heading 1"); 
 
     h1.appendChild(text); 
 
     var h2 = document.createElement("h2"); 
 
     var text2 = document.createTextNode("Heading 2"); 
 
     h2.appendChild(text2); 
 
     document.getElementById("output").appendChild(h1); 
 
    document.getElementById("output2").appendChild(h2); 
 
    } 
 

 
    function main() { 
 
     var h1 = document.createElement("h1"); 
 
     var text = document.createTextNode("Heading 1"); 
 
     h1.appendChild(text); 
 
     document.getElementById("output").appendChild(h1); 
 
     
 
     var h2 = document.createElement("h2"); 
 
     var text = document.createTextNode("Heading 2"); 
 
     h2.appendChild(text); 
 
     
 
     document.getElementById("output").appendChild(h1); 
 
     document.getElementById("output2").appendChild(h2); 
 

 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
    #output { 
 
     color: red; 
 
    } 
 
    </style> 
 
</head> 
 
<title> 
 
    XYZ 
 
</title> 
 

 
<body> 
 
    <button onclick="main()">Button 1</button> 
 
    <button onclick="temp()">Button 2</button> 
 
    <p id="output"> 
 

 
    </p> 
 
    <p id="output2"> 
 

 
    </p> 
 
</body> 
 
</html>

来源

2016-12-26 15:48:38 Deep

您可以创建构建您的节点的新方法，然后只需调用。它仍然创建了多个独特的节点（以满足AppendChild的要求），但是它可以让你的代码保持干爽（也就是说，不要重复自己）。这是makeMyElement方法。看到这里的jsFiddle：https://jsfiddle.net/sohfd5c4/3/ –

是的我同意，但x和y是2个不同的元素。如果您尝试再次附加x两次，它将从输出移动到输出2 – Deep

正确。我只是提供了一种简化制作两种不同元素的代码的方法。我最近的评论可能并不清楚。 –

JavaScript：将同一文本附加到HTML中的多个标记

回答

相关问题