javascript - 无法在 JavaScript 中重新追加同一个子项？

Question

我有一个 javascript，它可以简单地在表格中创建表单元素。在此过程中，我创建了一个表元素、2 个 tr 元素和 7 个 td 元素用于测试目的，我在 2 个 tr 元素中附加了相同 7 个 td 元素，最后附加到表单中。但运行脚本后，我发现 1 个 tr 元素与所有 7 个 td 元素一起渲染，但另一个 tr 元素完全为空。我的问题是为什么我们不能在不克隆创建的元素的情况下使用它？我们之前创建的子/元素实际上发生了什么？

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


                    }

输出:

<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

再次使用之前需要克隆子节点(节点)。这是因为元素位于 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) );