CODEWITHSUNDEEP
javascript
datasn.io
datasn.io

Reputation: 12867

appendChild failed appending same element to one of the same class elements?

Please see here.

We have this code in javascript:

document.addEventListener("DOMContentLoaded", function(event) {

  let source_elem = document.querySelector('.ProductMeta__Description .Rte .TableWrapper table');

  let size_table = source_elem.cloneNode( true );

  let hooks = document.querySelectorAll('.product-desc-table-clone');
  console.log('size: ' + hooks.length);
  for (i = 0; i < hooks.length; ++i) {
    hooks[i].appendChild( size_table );
    console.log(i);
  }

});

Which appends a size chart table to 2 div elements with class product-desc-table-clone. Oddly only the 2nd element got appended with the table.

Why?

Upvotes: 0

Views: 38

Answers (1)

Mamun
Mamun

Reputation: 68933

Node.appendChild()

If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position.

You can either use innerHTML or Element.insertAdjacentHTML().

Demo:

document.addEventListener("DOMContentLoaded", function(event) {

  let source_elem = document.querySelector('.ProductMeta__Description .Rte .TableWrapper table');
  let size_table = source_elem.cloneNode(true);
  let hooks = document.querySelectorAll('.product-desc-table-clone');
  console.log('size: ' + hooks.length);
  for (i = 0; i < hooks.length; i++) {
    hooks[i].insertAdjacentHTML('beforeend', size_table.outerHTML);
    console.log(i);
  }

});
<div class="ProductMeta__Description">
  <div class="Rte">
    <div class="TableWrapper">
       <table>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
      </table>
    </div>
  </div>
</div>

<div class="product-desc-table-clone"></div>
<div class="product-desc-table-clone"></div>

Upvotes: 1

Related Questions