MENU


Adding & Removing Nodes

An HTMLElement implements Element, Node, ChildNode, ParentNode, NonDocumentTypeChildNode.....
RESETRUNFULL
<!DOCTYPE html><html><head></head><body>
    <script>
        document.body.innerHTML = "<div></div>";
        var d = document.querySelector("div");
        var p = document.createElement("p");
        p.setAttribute("class","myclass");
        p.appendChild(document.createTextNode("Hello "));
        var i=document.createElement("i");
        i.innerText = "world";
        p.appendChild(i);
        d.appendChild(p);
        p.insertBefore(p.cloneNode(true),i);                                   // second parameter must be a child
        p.insertAdjacentHTML("afterend",
                                  "<p id='p2'>How do you do?</p>")
        i.replaceWith("Worldie");
        p.after("!");
        p.before(i.cloneNode(true));
        i.remove();
        console.log(d);
    </script></body></html>