Geek Answers Handbook

Explain what happens with the addition of a document fragment

I wonder what is going on here. I have a fragment of a document (which comes from a template) and I am adding this fragment to Dom (document.body). Before doing this, I get a link to all the children of the fragment and the console log. Then I make append and console.log the same array, and now it is empty.

Does anyone know what is going on here? Why is this array now empty after adding a fragment.

<html>
<body>

<template id="templateEl">
  <div>Div Content</div><span>Span Content</span>
</template>

<script>

var el = document.querySelector("#templateEl");
var fragment = document.importNode(el.content, true);
var children = fragment.children;

console.log(children);
document.body.appendChild(fragment);
console.log(children);

</script>
</body>
</html>
+4
source share
1 answer

When you use the method importNode(), you create a copy of this element as a fragment of the document .

true (), . , .

, , ( , ):

( MDN)

(, Node, Node.appendChild Node.insertBefore), , .

fragment , children .

0

More articles:


All Articles