The element type is a specific type of the node represented by a HTML/XML tag and can have attributes and methods associated with them. Elements may have child elements and a parent element. Since the Element interface inherits from the node, all the attributes and methods of that node are applicable to that element.

The element type has a NodeType as ‘1’. The node name can be determined by the nodeName property. The tagName of an element is same as the nodeName. The node value is determined by nodeValue property.

In the following example, the nodeName and tagName of the list are displayed.

Example with the nodeName and tagName properties of DOM

Creating and adding new elements in DOM

In JavaScript DOM elements can be created with the document's createElement() method.

 Syntax for creating elements in DOM

var liOne = document.createElement(‘li’);

When en element is created, it still has to be added to the document's tree. To add this element in a location of choice of the DOM, we have to use appendChild()method with the parent element.

Syntax for appending elements in DOM

var element = document.getElementById(“numbers”);

element.appendChild(liOne);

Example of how to create and append elements with the DOM methods

 

›› go to examples ››