CloneNode Vs Clone do we have to make it a Childnode?

Question

I am a newbie..My question differs from other similar questions becuase I speak about the use of childNode to append or not. 1) Use jquery or DOM method?. 2)As it may be better to append a div etc as childNode so it does not interfer with the hieratical structure when removed from the parent." 3) I also ask if it is okay to use clone and childNode in the same process..

The reason I ask the question is beacuse I continually read that it is better to append a div etc as childNode so it does not interfer with the hieratical structure when removed from the parent. Make Sense! But then I go and see two tutorials from a respectable source and in Example 2 below they just append to the body without making it a childNode. Below are both examples I have seen. Thanks for your help.

Example 1

<!DOCTYPE html>
<html>
<body>

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>

<p>Click the button to copy an item from one list to another.</p>

<button onclick="myFunction()">Try it</button>

<p>Try changing the <em>deep</em> parameter to false, and only an empty LI element will be cloned.</p>

<script>
function myFunction() {
  var itm = document.getElementById("myList2").lastChild;
  var cln = itm.cloneNode(true);
  document.getElementById("myList1").appendChild(cln);
}
</script>

</body>
</html>

Example 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").clone().appendTo("body");
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button>Clone all p elements, and append them to the body element</button>

</body>
</html>

My point is I am currently cloning using method 1 below without making it in to childNode. But I am willing to use method 2 if using childnode is the correct way? Also if the way I have adapted the code in method 2 is it correct? as it does work, or am I duplicating a duplicate?

Method 1: *what i use at the moment*
var cloned = $('.mydiv').first().clone();
$('.start-div').append(cloned);

Method 2:  *I adapted it to use cloneNode*   
var cloned = $('.mydiv').first().clone();
var myclone = cloned.cloneNode(true);
$('.start-div').appendChild(myclone);

*"... they just append to the body without making it a childNode..."* What do you mean by "making it a childNode"? Appending it to a parent node, by definition, makes it a child node. A child node isn't a type of object, it's just a way to say that a given node is a child of another given node. — T.J. Crowder, Feb 20 '21 at 14:22
Does this answer your question? [$.clone and .cloneNode](https://stackoverflow.com/questions/9476972/clone-and-clonenode) — Heretic Monkey, Feb 20 '21 at 14:35

T.J. Crowder · Accepted Answer · 2021-02-20T14:31:31.463

I think you're getting confused because some of the code you're looking at is using the DOM API directly (not using jQuery), but other code you're looking at is code using jQuery (a library that simplifies some DOM operations).

jQuery's clone method makes a deep copy of all of the elements in the jQuery object you call it on.

The DOM's cloneNode method makes a copy of the node you call it on (a deep copy if you pass the argument true).

E.g., they're different ways to do much the same thing (waving away some details).

Re your "Method 1" vs. "Method 2" at the end of your question: There's no point in using cloneNode in your example, because you've already made a copy of the elements you're appending with jQuery's clone method. In fact, your "Method 2" will fail, because you're calling cloneNode on a jQuery object, not a DOM Node, and jQuery objects don't have a cloneNode function.

If your goal is to append a copy of the first .mydiv found in the DOM to the end of .start-div, your Method 1 code is fine:

var cloned = $('.mydiv').first().clone();
$('.start-div').append(cloned);

Alternatively, if you wanted to do it using the DOM directly rather than using jQuery, you'd do:

var cloned = document.querySelector('.mydiv').cloneNode(true);
document.querySelector('.start-div').appendChild(cloned);

That does roughly the same thing the jQuery code does, although unlike the jQuery code it assumes that there will be at least one matching element for each of those selectors. (jQuery is set-based, and allows you to do operations on empty sets without raising errors.)

CloneNode Vs Clone do we have to make it a Childnode?

1 Answers1