<html>
<body>
<h1>The Document Object</h1>
<h2>The createDocumenFragment() Method</h2>
<p>Add array items to an existing list:</p>
<ul id="myList">
<li>Apple</li>
<li>Pear</li>
</ul>
<script>
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const dFrag = document.createDocumentFragment();
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(dFrag);
</script>
</body>
</html>