cannot re-append same child in javascript?

Question

I have a javascript which simply create form elements within a table. In this process i created a table element , 2 tr element and 7 td elements for testing purpose , I appended same 7 td elements in 2 tr elements and finally appended into form. But after running script I found that 1 tr element was rendering with all 7 td elements but another tr element was completely null. My question is Why we cannot use a created element without cloning it ? What actually happens to the child / elements we earlier created ?

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>

score 2 · Answer 1 · edited May 23 '17 at 12:13

Extracted answer from here (Posible duplicate); Insert HTML element two (or more) times using JavaScript

You need to clone child (node) before use again. This is because element is in DOM and you can't reuse it.

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) );

score 0 · Answer 2 · answered Nov 05 '16 at 08:58

When you create a Node object in Javascript is it unique and cannot be present more than once.

In your case, first it is appended to t1 and then to t2. By doing this you only see on instance in t2.

As suggested in one of the answers there is a method in javascript called as cloneNode which can be used to create another node and then append it where ever required.

cannot re-append same child in javascript?

2 Answers2