How to replace append() of jQuery with append() of JavaScript

Question

How to replace append() of jQuery with append() of JavaScript

I have two tables and I want to insert table 2 at the end of table 1. With jQuery it's so easy that I came up with the "good idea" to try doing it with javascript.

Here is the code of what I have tried so far:

$(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>

My question:

How to replace append() from jQuery with append() JavaScript?

jquery is 3party JS, you need to make difference between JQ and DOM, your question is resolved with appendchild — Abr001am
– Abr001am, Commented Apr 13, 2018 at 23:47

Scott Marcus · Accepted Answer · 2018-04-13 23:51:30Z

1

In vanilla JavaScript, it's .appendChild(), not .append() and you don't append .innerHTML, you have to append a DOM node.

$(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>

answered Apr 13, 2018 at 23:51

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ibrahim mahrir Over a year ago

Just one note though, your code moves the tbody to a new parent, not copying its content into that parent.

fwBasic Over a year ago

with jquery table 2 is maintained, with its solution this is erased

Scott Marcus Over a year ago

@ibrahimmahrir It's not clear from OP's question that this was a requirement.

Scott Marcus Over a year ago

@fwBasic The solution answers your question and does work as it is written. It is not clear what your ultimate goal is.

Collectives™ on Stack Overflow

How to replace append() of jQuery with append() of JavaScript