は、同じ子をjavascriptに再追加できませんか？

Question

私は単にテーブル内にフォーム要素を作成するjavascriptを持っています。このプロセスでは、テスト用に2 tr要素と7 td要素を作成し、2 tr要素に同じ 7要素を追加し、最終的にフォームに追加しました。しかし、スクリプトを実行した後、私は1 tr要素が7 td要素すべてでレンダリングされていたが、別のtr要素は完全にnullであることが分かった。私の質問はなぜ私たちはそれを複製せずに作成された要素を使用することができないのですか？先に作成した子要素に実際には何が起こりますか？

function add_table(){ 
         //Get value of nos 
         var n = document.getElementById("nos").value; 
         //===== 
         document.getElementById("form_new").innerHTML = ""; 
         // var divy = document.createElement("DIV"); 
        // divy.setAttribute("class","col-md-12"); 
         var formy =document.createElement("form"); 
         var tabley =document.createElement("TBODY"); 
         var tablepy =document.createElement("TABLE"); 
         tablepy.setAttribute("class" , "table table-bordered table-striped"); 
         var tr_1 =document.createElement("TR"); 
         var tr_2 =document.createElement("TR"); 
         tr_2.setAttribute("id","2"); 
         tr_1.setAttribute("id","1"); 

         var td_1 =document.createElement("TD"); 
         var td_2 =document.createElement("TD"); 
         var td_3 =document.createElement("TD"); 
         var td_4 =document.createElement("TD"); 
         var td_5 =document.createElement("TD"); 
         var td_6 =document.createElement("TD"); 
         var td_7 =document.createElement("TD"); 

         var td_t1 =document.createTextNode("#"); 
         var td_t2 =document.createTextNode("Verification no."); 
         var td_t3 =document.createTextNode("Name"); 
         var td_t4 =document.createTextNode("Email"); 
         var td_t5 =document.createTextNode("Password"); 
         var td_t6 =document.createTextNode("Contact"); 
         var td_t7 =document.createTextNode("Gender"); 
         td_1.appendChild(td_t1); 
         td_2.appendChild(td_t2); 
         td_3.appendChild(td_t3); 
         td_4.appendChild(td_t4); 
         td_5.appendChild(td_t5); 
         td_6.appendChild(td_t6); 
         td_7.appendChild(td_t7); 

         //Table header added 
         tr_1.appendChild(td_1); 
         tr_1.appendChild(td_2); 
         tr_1.appendChild(td_3); 
         tr_1.appendChild(td_4); 
         tr_1.appendChild(td_5); 
         tr_1.appendChild(td_6); 
         tr_1.appendChild(td_7); 

         tr_2.appendChild(td_1); 
         tr_2.appendChild(td_2); 
         tr_2.appendChild(td_3); 
         tr_2.appendChild(td_4); 
         tr_2.appendChild(td_5); 
         tr_2.appendChild(td_6); 
         tr_2.appendChild(td_7); 


         tabley.appendChild(tr_2); 
         tabley.appendChild(tr_1); 
         tablepy.appendChild(tabley); 

         document.getElementById("form_new").appendChild(tablepy); 


        } 

OUTPUT：

<div id="form_new" class="col-md-12"> 
<table class="table table-bordered table-striped"> 
<tbody> 
<tr id="2"> 
<td>#</td> 
<td>Verification no.</td> 
<td>Name</td> 
<td>Email</td> 
<td>Password</td> 
<td>Contact</td> 
<td>Gender</td> 
</tr> 
<tr id="1"></tr> 
</tbody> 
</table> 
</div> 

Answer 1

が（でとりうる複製）ここから解答を抽出。 Insert HTML element two (or more) times using JavaScript

再度使用する前に、子（ノード）を複製する必要があります。これは、elementがDOMにあり、再利用できないためです。

var tr_1 =document.createElement("TR"); 
 
tr_1.setAttribute("id","1"); 
 

 
var tr_2 =document.createElement("TR"); 
 
tr_2.setAttribute("id","2"); 
 

 
var tr_3 =document.createElement("TR"); 
 
tr_3.setAttribute("id","3"); 
 

 

 
var td_1 =document.createElement("TD"); 
 
td_1.appendChild(td_t1); 
 

 
var td_t1 =document.createTextNode("#"); 
 

 
td_1.appendChild(td_t1); 
 

 
tr_1.appendChild(td_1); 
 

 
//here you need to clone 
 
var td_1_cloned = td_1.cloneNode(true); 
 
tr_2.appendChild(td_1_cloned); 
 

 
//or better 
 
tr_3.appendChild(td_1.cloneNode(true));

Answer 2

あなたはJavaScriptでNodeオブジェクトを作成するとき、それは一意であり、複数回存在することはできません。

あなたの場合は、最初にt1に追加されてからt2に追加されます。これを行うと、t2のインスタンスだけが表示されます。

答えの1つとして、cloneNodeというjavascriptのメソッドがあります。これは、別のノードを作成し、必要な場所に追加するために使用できます。