JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<input type="button" value="add" id="add" />
<input type="button" value="remove" id="remove" />
<input type="button" value="Get Length of live Node List" id="lengthOfLiveNode" />
<input type="button" value="Get Length of non-live Node List" id="lengthOfNonLiveNode" />
<section id="divs">
    <div>Node</div>
    <div>Node</div>
    <div>Node</div>
    <div>Node</div>
    <div>Node</div>
    <div>Node</div>
</section>

JavaScript

var divs = document.getElementById("divs"),
    liveNodeList = divs.getElementsByTagName("div"),
    nonLiveNodeList = divs.querySelectorAll("div");

document.getElementById("add").addEventListener("click", function (e) {
    var newEle = document.createElement("div"),
        text = document.createTextNode("Node");
    newEle.appendChild(text);
    divs.appendChild(newEle);
});

document.getElementById("remove").addEventListener("click", function (e) {
    divs.removeChild(divs.lastElementChild);
});

document.getElementById("lengthOfLiveNode").addEventListener("click", function (e) {
    alert(liveNodeList.length);
});

document.getElementById("lengthOfNonLiveNode").addEventListener("click", function (e) {
    alert(nonLiveNodeList.length);
});