Document fragments

Document fragments are strange and have no children

by ubershmekel

HTML

<ul></ul>

<pre class="log"></pre>

JavaScript

const ul = document.querySelector("ul");
const fruits = ["Apple", "Orange", "Banana", "Melon"];

const fragment1 = new DocumentFragment();
const fragment2 = new DocumentFragment();

for (const fruit of fruits) {
  const li = document.createElement("li");
  li.textContent = fruit;
  fragment2.append(li);
}

fragment1.append(fragment2);
ul.append(fragment1);

function log(text){
	document.querySelector('.log').append(document.createTextNode(text + "\n"))
}

log(`fragment1.children[0]: ${fragment1.children[0]}`)
log(`fragment2.children[0]: ${fragment2.children[0]}`)
log(`ul.children[0]: ${ul.children[0]}`)
log(`${document.querySelector('li').textContent}`)
log(`${document.querySelector('li').parentNode}`)
log(`${document.querySelector('li').parentNode.parentNode}`)
log(`${document.querySelector('ul').childNodes.length}`)