如何用JavaScript的append（）替换jQuery的append（）

Question

如何用JavaScript的append（）替换jQuery的append（）

我有两个表，我想在表1的末尾插入表2。使用jQuery很容易，我想到了“好主意”来尝试使用javascript。

这是到目前为止我尝试过的代码：

 $(document).ready(function (){ // Version using jQuery $("#jQuery").on("click", function () { $("#lst1").find("tbody").append( $("#lst2").find("tbody").html() ); }); // Version using JavaScript $("#jScript").on("click", function () { document.querySelector("#lst1").querySelector("tbody").append( document.querySelector("#lst2").querySelector("tbody").innerHTML ); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div style="height:70px; overflow:scroll;" tabindex="1"> <table id="lst1" width="100%" border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th colspan="2">Table 1</th> </tr> <tr> <th>&nbsp;code&nbsp;</th> <th>&nbsp;Name&nbsp;</th> </tr> </thead> <tbody data-role="input-list"> </tbody> </table> </div> <div style="height:70px; overflow:scroll;" tabindex="1"> <table id="lst2" width="100%" border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th colspan="2">Table 2</th> </tr> <tr> <th>&nbsp;code&nbsp;</th> <th>&nbsp;Name&nbsp;</th> </tr> </thead> <tbody data-role="input-list"> <tr> <td>00010</td> <td>&nbsp;</td> </tr> <tr> <td>00020</td> <td>&nbsp;</td> </tr> <tr> <td>00030</td> <td>&nbsp;</td> </tr> <tr> <td>00031</td> <td>&nbsp;</td> </tr> <tr> <td>00040</td> <td>&nbsp;</td> </tr> </tbody> </table> </div> <button id="jQuery">Merge jQuery</button> <button id="jScript">Merge jScript</button> </body> </html> 

我的问题：

如何更换append()从jQuery的用append() 的JavaScript ？

Answer 1

在.appendChild() JavaScript中，它是.appendChild() ，而不是.append()并且您没有附加.innerHTML ，您必须附加一个DOM节点。

 $(document).ready(function (){ // Version using jQuery $("#jQuery").on("click", function () { $("#lst1").find("tbody").append( $("#lst2").find("tbody").html() ); }); // Version using JavaScript $("#jScript").on("click", function () { document.querySelector("#lst1").querySelector("tbody").appendChild( document.querySelector("#lst2").querySelector("tbody") ); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <div style="height:70px; overflow:scroll;" tabindex="1"> <table id="lst1" width="100%" border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th colspan="2">Table 1</th> </tr> <tr> <th>&nbsp;code&nbsp;</th> <th>&nbsp;Name&nbsp;</th> </tr> </thead> <tbody data-role="input-list"> </tbody> </table> </div> <div style="height:70px; overflow:scroll;" tabindex="1"> <table id="lst2" width="100%" border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th colspan="2">Table 2</th> </tr> <tr> <th>&nbsp;code&nbsp;</th> <th>&nbsp;Name&nbsp;</th> </tr> </thead> <tbody data-role="input-list"> <tr> <td>00010</td> <td>&nbsp;</td> </tr> <tr> <td>00020</td> <td>&nbsp;</td> </tr> <tr> <td>00030</td> <td>&nbsp;</td> </tr> <tr> <td>00031</td> <td>&nbsp;</td> </tr> <tr> <td>00040</td> <td>&nbsp;</td> </tr> </tbody> </table> </div> <button id="jQuery">Merge jQuery</button> <button id="jScript">Merge jScript</button> </body> </html>