HTML JS

HOW TO ADD & REMOVE HTML LIST ITEMS IN JAVASCRIPT

1) CREATE LIST ITEM & APPEND

<ol id="demoA">   <li>Item</li> </ol>

// CREATE NEW LIST ITEM var li = document.createElement("li"); li.innerHTML = "New";   // APPEND TO LIST document.getElementById("demoA") .appendChild(li);

2) APPEND HTML STRING

document.getElementById("demoB") .innerHTML += "<li>New</li>";

<ol id="demoB">   <li>Item</li> </ol>

3) REMOVE ITEMS

<ol id="demoC">   <li>Item</li> <li>Item</li> <li>Item</li> </ol>

// GET LIST + ALL ITEMS var ol = document.getElementById ("demoC"); var all = document.querySelectorAll ("#demoC li");   // REMOVE ITEMS ol.removeChild(all[0]); ol.removeChild(all[1]); ol.removeChild(all[2]);