HTML5 code that alter the DOM

Altering the DOM

Having access to the DOM through JavaScript can be used to provide rich user experience when creating dynamic webpages.

After you have a reference to a container element, you can dynamically: add child elements, remove elements or simply hide elements.

Using document.createElement Method

To create a new HTML element you can use document.createElement. The method receives a single parameter—the element name of the element you want to create.

The following code creates a new <article> element

<script type="text/javascript">
    var createArticle = function () {
        var element = document.createElement("article");
        element.innerText = "My new <article> element";
    }
</script>

This new <article> element isn’t visible to anyone at this point; it merely exists in the DOM for use within your page.

Using appendChild Method

You use this method to add a new HTML element to the collection of child elements belonging to the calling container. The appendChild method exists on the document object as well as on other HTML container elements. It returns a reference to the newly added node.

<script type="text/javascript">
    var appendArticle = function () {
        var outerDiv = document.getElementById("outerDiv");
        var element = document.createElement("article");
        element.innerText = "My new <article> element";
        outerDiv.appendChild(element);
    }
</script>

Using insertBefore Method

To insert the new <article> element somewhere more precise, the insertBefore method could be more suitable. This method takes two parameters: the new element itself, and the node before which you want to append the new element.

<script type="text/javascript">
    var insertBeforeElement = function () {
        var element = document.getElementById("outerDiv").insertBefore(
        document.createElement("article"),
        document.getElementById("innerDiv"));
        element.innerText = "My new <article> element";
    }
</script>

This example uses the getElementById method to get a reference to the node before which you wanted to insert your <article> element in the DOM.

The properties listed in the following Table get references to the more common nodes when working with the DOM.

For an example of these properties, to insert an <article> element as the first element in the innerDiv element:

<script type="text/javascript">
  var insertFirstChild = function () {
    var inner = document.getElementById("innerDiv");
    var element = inner.insertBefore(document.createElement("article"), inner.firstChild);
    element.innerText = "My new <article> element";
  }
</script>

If you try to insert elements into a node that doesn’t support child nodes he interpreter throws a run-time error.

Using removeChild Method

The removeChild method removes a child node from the calling container.

The following example removes the first <p> element from your innerDiv element:

<script type="text/javascript">
    var removeChildElement = function () {
        var innerDiv = document.getElementById("innerDiv");
        var p = innerDiv.removeChild(document.getElementById("P1"));
    }
</script>

Using removeNode Method

This method takes one Boolean parameter. Setting the parameter as true tells the method to do a deep removal, which means that all children are also removed.

<script type="text/javascript">
    var removeNodeElement = function () {
        var innerDiv = document.getElementById("innerDiv");
        innerDiv.removeNode(true);
    }
</script>

Using replaceNode and replaceChild Methods

These two methods operate in the same way as removeNode and removeChild in terms of the parameters they take and which elements they affect.

The difference, however, is that you can replace the target element with a completely new element.

The following code converts all your inner paragraphs to anchor elements:

<script type="text/javascript">
    var convertParaghrapsToAnchors = function () {
        var innerDiv = document.getElementById("innerDiv");
        var newDiv = document.createElement("div");
        for (var i = 0; i < innerDiv.childNodes.length; i++) {
            var anchor = newDiv.appendChild(document.createElement("a"));
            anchor.setAttribute("href", "http://www.bing.com");
            anchor.text = innerDiv.childNodes[i].textContent;
            newDiv.appendChild(document.createElement("br"));
        }
        innerDiv.replaceNode(newDiv);
    }
</script>