HTML JS

JAVASCRIPT DOCUMENT FRAGMENT

WE WILL BE APPENDING MORE ITEMS INTO THIS LIST.   <ul id="thelist">   <li>Apple - A juicy red fruit, sometimes    green.</li> </ul>

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();

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);