Cloning and inserting elements, part 3

If the element is copied without its nested elements when false is passed to cloneNode, then the exact opposite is true when passing true. In this case, the element itself is cloned along with all all of the nested elements. This type of cloning includes all attributes, classes, and the text contents of all nested elements. We call this deep cloning.

Previously, the cloneNode method behaved like this by default, even when true was not passed. Under the new standard, this behavior has changed, and the method should perform non-deep copying by default without needing to be passed an argument (where before you would have had to pass false to it). However, the standard only proposes recommendations, whereas it is up the browser whether to follow them or not. Currently not all browsers have switched to the new standard, and in order to ensure backward compatibility they retain the old behavior by performing deep cloning by default.

Therefore, it is best to always pass a Boolean value to avoid unpredictable program behavior.

element.cloneNode(true);  // Returns a cloned element with all nested elements
element.cloneNode();      // 0_o

Let’s take a look at how deep cloning works in practice. Copy the template, add text content to its child element, and add the template to the page.