Sé que append() es un método que inserta una lista de objetos de nodo como el último hijo del elemento al que se llama. Mi pregunta es, ¿por qué en el siguiente código el . El método append() no agrega elementos adicionales como sus últimos elementos secundarios, sino que actúa como si modificara los elementos originales.
let tbody = grid.querySelector('tbody'); let rowsArray = Array.from(tbody.rows); tbody.append(...rowsArray); <html> <head> <meta charset="utf-8" /> </head> <body> <table id="grid"> <thead> <tr> <th data-type="number">Age</th> <th data-type="string">Name</th> </tr> </thead> <tbody> <tr> <td>5</td> <td>John</td> </tr> <tr> <td>2</td> <td>Pete</td> </tr> <tr> <td>12</td> <td>Ann</td> </tr> <tr> <td>9</td> <td>Eugene</td> </tr> <tr> <td>1</td> <td>Ilya</td> </tr> </tbody> </table>Un elemento solo puede existir en un lugar en el DOM. Está agregando los elementos, pero no los está clonando, por lo que tiene el efecto de mover esos elementos al final del padre. Si tuviera que clonarlos, los vería duplicados, aquí usandocloneNode() .
let tbody = grid.querySelector('tbody'); let rowsArray = Array.from(tbody.rows).map(row => row.cloneNode(true)); tbody.append(...rowsArray); <table id="grid"> <thead> <tr> <th data-type="number">Age</th> <th data-type="string">Name</th> </tr> </thead> <tbody> <tr> <td>5</td> <td>John</td> </tr> <tr> <td>2</td> <td>Pete</td> </tr> <tr> <td>12</td> <td>Ann</td> </tr> <tr> <td>9</td> <td>Eugene</td> </tr> <tr> <td>1</td> <td>Ilya</td> </tr> </tbody></table>