HTML JS

JAVASCRIPT DOCUMENT FRAGMENT

(quick guide & example)

WE WILL BE APPENDING MORE ITEMS INTO THIS LIST. <ul id="thelist">   <li>Apple - Keeps doctor away.</li> </ul>

THE HTML

01

THE JAVASCRIPT (A)

02

DATA TO ADD var data = {   Banana : "Long yellow fruit.",   Cherry : "Small red berry thing.",   Dragonfruit : "Not a dragon but a fruit." };

CREATE DOCUMENT FRAGMENT var frag = new DocumentFragment();

THE JAVASCRIPT (B)

03

APPEND DATA TO FRAGMENT for (let [k,v] of Object.entries(data)) {   let row = document.createElement("li");   row.innerHTML = `${k} - ${v}`;   frag.appendChild(row); }

APPEND FRAGMENT TO TABLE document.getElementById("thelist") .appendChild(frag);