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中的多個標記

回答

相關問題