HTML JS

HOW TO ADD & REMOVE HTML LIST ITEMS IN JAVASCRIPT

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

CREATE NEW LIST ITEM var li = document.createElement("li"); li.innerHTML = "New";

CREATE & APPEND LIST ITEM

01

APPEND TO LIST document.getElementById("demoA") .appendChild(li);

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

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

CREATE & APPEND HTML LIST ITEM

02

<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 LIST ITEM

03

REMOVE ITEMS ol.removeChild(all[0]); ol.removeChild(all[1]); ol.removeChild(all[2]);