HTML JS
WE WILL BE APPENDING MORE ITEMS INTO THIS LIST. <ul id="thelist"> <li>Apple - A juicy red fruit, sometimes green.</li> </ul>
01
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();
03
APPEND DATA TO FRAGMENT for (let fruit in data) { let row = document.createElement("li"); row.innerHTML = `${fruit} - ${data[fruit]}`; frag.appendChild(row); }
APPEND FRAGMENT TO TABLE document.getElementById("thelist") .appendChild(frag);