CODEWITHSUNDEEP
javascript
user1796666
user1796666

Reputation:

Why can't I append a cloned element to another parent?

I've got two divs:

<div id='div1'>
  <span>text</span>
</div>

<div id='div2'>
</div>

I'm trying to move the span from div1 to div2:

  var div1 = document.querySelector('#div1');
  var div2 = document.querySelector('#div2');

  //cloning span
  var span = div1.firstElementChild.cloneNode();
  //removing span from the first div
  div1.removeChild(div1.firstElementChild);
  //trying to append new span to the second div but nothing happens
  div2.appendChild(span);

The span element is removed but isn't inserted in the second div.

Am I missing something?

Upvotes: 1

Views: 96

Answers (1)

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276596

You want a deep copy. cloneNode accepts an optional parameter

 var span = div1.firstElementChild.cloneNode(true);

(here is a fiddle)

While deep is supposed to be true by default according to the new specification, in chrome and safari it defaults to false.

Upvotes: 4

Related Questions