Search code examples
javascripthtmlappendchildcreateelement

Adding two identical nodes to different HTML elements

I am creating a table using createElement, for example:

var tbl = document.createElement('table');

I create the body, rows, and cells the same way. I want to output the exact same table to two different HTML elements. Let's called them ele1 and ele2.

var elements = ['ele1', 'ele2'];

for (var i = 0; i < elements.length; i++) {
   tbl.id = "table_" + i; //set the ID so they differ for each table instance
   document.getElementById(ele).appendChild(tbl);
}

However, the table only ever appears in the last element. I can't figure out how to duplicate the tables.

I've I create the ENTIRE table from scratch for EVERY element it works but I am trying to avoid unnecessary processing.

Solution

  • Use cloneNode:

    document.getElementById(ele).appendChild(tbl.cloneNode(true));