2
私はJSの学習者ですが、学習中は同じテキストをHTMLの複数のタグに追加しようとしていました。たとえば、私はそうしながら、私はJSでそれを行うには考えなどJavaScript：HTML内の複数のタグに同じテキストを追加する
ヘッダ、セクション、記事、Pのように複数のHTMLタグ内に挿入したいけど「H1」タグを持っていた場合赤 ID =「出力」&でpタグでAPPENDを取得します。私が複数のタグに2つの異なるテキストを追加した場合、それは色付きのテキストが2ボタンをクリックすることで見ることができる正常に動作していることが起こりますid = "output2"のpタグの他のテキスト
しかし、私は、pタグの両方で同じテキストを追加していますが、それは唯一のid =「OUTPUT2」でpタグに追加取得1ボタンをクリックしながら。
その理由は何ですか？
注：私はテキストを追加したいと述べたが、私の最初の考えは、私は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>
あなたのノードを構築するための新しい方法を作成し、ちょうどそれを呼び出すことができます。 AppendChildの要件を満たすために複数のユニークなノードが作成されますが、コードをDRY（別名Do not Repeat Yourself）にしておくことができます。 makeMyElementメソッドです。ここのjsFiddleを見てください：https://jsfiddle.net/sohfd5c4/3/ –
はい私は同意しますが、xとyは2つの異なる要素です。もう一度xを2回追加しようとすると、出力から出力2に移動します。 – Deep
正しいです。私はちょうど2つの異なる要素を作るためのコードを合理化する方法を提供していました。私はおそらく私の最後のコメントではっきりしていなかった。 –