This feature can be exploited even further to change the structure of the document itself. You can perform operations like add , clone, remove, copy etc on the elements on the document.
Users can alter the hierarchy of the DOM and the changes will be reflected in the document structure immediately.
Table : DOM Manipulation Members
|appendChild(HTMLElement)||To append the specified element as a child of the current element||void|
|cloneNode(boolean)||To create a copy of an element||HTMLElement|
|compareDocumentPosition(HTMLElement)||To determine the relative position of the element in the Document||number|
|innerHTML||To get or set the element's contents||string|
|insertAdjacentHTML(<pos>, <text>)||To insert HTML relative to the element||void|
|insertBefore(<newElem>, <childElem>)||To insert the first element before the second element.||HTMLElement|
|isEqualNode(<HTMLElement>)||To find out if the specified element is equal to the current element||boolean|
|isSameNode(HTMLElement)||To determine if the specified element is the same as the current element||boolean|
|outerHTML||To Get or set an element's HTML and other contents||string|
|removeChild(HTMLElement)||To remove the specified child of the current element||HTMLElement|
|replaceChild(HTMLElement, HTMLElement)||To Replace a child of the current element||HTMLElement|
|createElement(<tag>)||To Replace a child of the current element||HTMLElement|
|createTextNode(<text>)||To Replace a child of the current element||HTMLElement|
Elements can be inserted into the DOM by finding an existing HTMLElement and making use of the method and properties defined above.
The below demo adds a new row to the table by creating a <tr> element and then uses itas the parent of <td> and Text objects.
A Duplicate or a clone node is created using the method cloneNode() , it returns a duplicate of the current node with all its attributes.
But it does not become a part of the document as it does not have a parent node, until it is appended to another node
If a node is clone with an id attribute then a new the duplicate node must be assigned a new id as ids must be unique.
To move one element from one part of the document to another part, you need to associate the element to a new parent.
The elements need not be dislocated from the starting position. In the below demo , we move a row from one table to another.
The element objects can be compared in two ways, first way is to use isSameNode method.
This method is used to comprare objects that have been obtained from different queries.
In the below demo, the script locates element object using two different ways :
First by locating for a specific id and second by searching the tag from the parent element.
The method isSameNode method returns true when these two objects are compared as they represent the same element, or else it returns false.
An alternative way to compare elements is to see if the element objects are equal, this is done using the method isEqualNode Method.
Two elements are said to be equal only if:
- they are of same type.
- they have the same attribute values.
- and the childnodes are also equal in the same order.
The demo below, checks if the elements are equal.
In order to work with fragments of HTML the properties used are innerHTML outerHTML and method insertAdjacentHTML .
The innerHTML property completely replaces all of the child nodes within the element with a new DOM subtree bases on the values specified in the script.
The outerHTML property replaces the node on which it is called with the DOM subtree created from parsing the given HTML string.
In the below code, property outerHTML returns a string containing the HTML defining the element and the HTML of all of its child elements, while the innerHTML returns just the HTML of the children.
Most of the examples in the tutorials make use of the property innerHTML because it allows to create text content without the need to create Text Elements.
In the Demo below, the innerHTML property is use to set the child elements of a table row and the outerHTML is used to replace an inline element.
To replace exiting elements in the DOM the properties of innerHTML and outerHTML are used.
But to insert new elements using HTML fragments the property to be used is insertAdjacentHTML method.
The method accepts two arguments , first is the position parameter to specify where the fragment should be inserted relative to the current element, and the second specifies the fragment to be inserted.
Table: Position parameter values for the method insertAdjacentHTML
|afterbegin||It inserts a fragment as the first child of the element|
|afterend||It inserts a fragment before the current element|
|beforebegin||It inserts a fragment immediately before the current element|
|beforeend||It inserts a fragment as the last child of the current element|
An important application of DOM modification properties and methods is to add an element to a text block, represented by a Text object.
In the below demo, a word is taken from the text block and then made the child element of a new element <strong>