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

Question

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

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

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 to do it with javascript.

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

$(document).ready(function (){

 // Version utilizando jQuery
 $("#jQuery").on("click", 
  function () {
   $("#lst1").find("tbody").append(
    $("#lst2").find("tbody").html()
   );
 });

 // Version utilizando 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>
<head>
 <title>Lista de Entidades</title>
</head>
<body>
 <div style="height:70px; overflow:scroll;" tabindex="1">
  <table id="lst1" width="100%" border="1" cellspacing="0" cellpadding="0">
   <thead>
    <tr>
     <th colspan="6">Tabla 1</th>
    </tr>
    <tr>
     <th>&nbsp;Codigo&nbsp;</th>
     <th>&nbsp;Nombre&nbsp;</th>
     <th>&nbsp;Documentos&nbsp;</th>
     <th>&nbsp;Saldo Bs.&nbsp;</th>
     <th>&nbsp;Direccion&nbsp;</th>
     <th>&nbsp;Telefonos&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="6">Tabla 2</th>
    </tr>
    <tr>
     <th>&nbsp;Codigo&nbsp;</th>
     <th>&nbsp;Nombre&nbsp;</th>
     <th>&nbsp;Documentos&nbsp;</th>
     <th>&nbsp;Saldo Bs.&nbsp;</th>
     <th>&nbsp;Direccion&nbsp;</th>
     <th>&nbsp;Telefonos&nbsp;</th>
    </tr>
   </thead>
   <tbody data-role="input-list">
    <tr>
     <td>00010</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00020</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00030</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00031</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00040</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00050</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00060</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00070</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00080</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00090</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00100</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00110</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00120</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00130</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00140</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00150</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
   </tbody>
  </table>
 </div>
 <button id="jQuery">Mezclar con jQuery</button>
 <button id="jScript">Mezclar con jScript</button>
</body>
</html>

javascript jquery

asked by fwBasic 14.04.2018 в 00:49

source

2 answers

1

With javascript it would be purely like this

<script>
//Obtengo el botón que va hacer la operación
var btn = document.querySelector("#jScript");
//Asigno el evento onClick al botón
btn.addEventListener("click", function(){
    //Obtengo el tbody de la primera tabla
    var info1 = document.querySelector("#lst1").querySelector("tbody");
   //Obtengo el tbody de la segunda tabla
    var info2 = document.querySelector("#lst2").querySelector("tbody");
   //Itero sobre los hijos del tbody de la segunda tabla
    while(info2.firstChild){
        //Los voy insertando
        info1.append(info2.firstChild);
    }

});
</script>

If you did not iterate over the children and do what @alanfcm says, the structure of your first table would be

<tbody>
 <!-- Aki van las filas viejas -->
 <tbody> <!-- tbody de la segunda tabla -->
    //Aki van las filas nuevas

answered by 14.04.2018 в 01:22

Get value of a partialview in the parent view Write doubles with fwrite in c

score 1 · Accepted Answer

One option would be to iterate over the child nodes of tbody and add them with appendChild() . To have the same behavior as in jQuery you would have to do a deep cloning with cloneNode(true) :

function () {
    var target = document.querySelector("#lst1 > tbody");
    var children = document.querySelector("#lst2 > tbody").children;
    for(i=0; i<children.length; ++i){
      target.appendChild(children.item(i).cloneNode(true));
    }
}

$(document).ready(function (){

 // Version utilizando jQuery
 $("#jQuery").on("click", 
  function () {
   $("#lst1").find("tbody").append(
    $("#lst2").find("tbody").html()
   );
 });

 // Version utilizando JavaScript
 $("#jScript").on("click", 
  function () {
    var target = document.querySelector("#lst1 > tbody");
    var children = document.querySelector("#lst2 > tbody").children;
    for(i=0; i<children.length; ++i){
      target.appendChild(children.item(i).cloneNode(true));
    }
    
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
 <title>Lista de Entidades</title>
</head>
<body>
 <div style="height:70px; overflow:scroll;" tabindex="1">
  <table id="lst1" width="100%" border="1" cellspacing="0" cellpadding="0">
   <thead>
    <tr>
     <th colspan="6">Tabla 1</th>
    </tr>
    <tr>
     <th>&nbsp;Codigo&nbsp;</th>
     <th>&nbsp;Nombre&nbsp;</th>
     <th>&nbsp;Documentos&nbsp;</th>
     <th>&nbsp;Saldo Bs.&nbsp;</th>
     <th>&nbsp;Direccion&nbsp;</th>
     <th>&nbsp;Telefonos&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="6">Tabla 2</th>
    </tr>
    <tr>
     <th>&nbsp;Codigo&nbsp;</th>
     <th>&nbsp;Nombre&nbsp;</th>
     <th>&nbsp;Documentos&nbsp;</th>
     <th>&nbsp;Saldo Bs.&nbsp;</th>
     <th>&nbsp;Direccion&nbsp;</th>
     <th>&nbsp;Telefonos&nbsp;</th>
    </tr>
   </thead>
   <tbody data-role="input-list">
    <tr>
     <td>00010</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00020</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00030</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00031</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00040</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00050</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00060</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00070</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00080</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00090</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00100</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00110</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00120</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00130</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00140</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00150</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
   </tbody>
  </table>
 </div>
 <button id="jQuery">Mezclar con jQuery</button>
 <button id="jScript">Mezclar con jScript</button>
</body>
</html>