Search within TutorialsPark

Javascript DOM: Modification


Use Javascript DOM properties and methods to modify the Document Structure


Javascript DOM : Modifying the Document Model

Any Changes made on the DOM using javascript properties and methods are reflected in document model in instantly, this is based on the javascript interpreter of the browser.

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.

The Javascript DOM properties and Methods used to alter the document hierarchy are explained in detail below.

Table : DOM Manipulation Members

Member Description Returns
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

Javascript DOM Modification: Create and Delete Elements

In Javascript DOM document object can be used to create new elements.

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.

Example: Javascript DOM Modification: Creating and Deleting Element.

Give it a TRY! » Note: You must first create the element and associate it with its parent.


Javascript DOM Modification: Duplicate Elements

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.

Example: Javascript DOM : Text object Methods

Give it a TRY! » Note: The cloneNode() accepts Boolean arguments (i.e true or false), but not mandatory.


Javascript DOM Modification: Moving Elements

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.

Example: Javascript DOM Modification: Moving Elements

Give it a TRY! » Note: The cloneNode() accepts Boolean arguments (i.e true or false), but not mandatory.


Javascript DOM Modification: Compare Element Object

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.

Example: Javascript DOM : Comparing Element Objects using isSameNode() Method

Give it a TRY! » Note: This method returns true only when the two nodes they reference are the same.


Javascript DOM : Working with Equal Elements

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.

Example: Javascript DOM : Text object Methods

Give it a TRY! » Note: Both the tables are equal even though they are distinct tables.


Javascript DOM Modification: Using HTML Fragments

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.

Example: Javascript DOM : HTMLElement Fragments using innerHTML and outerHTML


Give it a TRY! » Note: <textarea> element is used so the browser treats the string as text and not HTML.


Javascript DOM Modification: Changing the Document Structure

Javascript DOM properties innerHTML outerHTML properties can be used to alter the structure of the document as well.

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.

Example: Javascript DOM : Changing the DOM Structure

Give it a TRY! » Note: These properties work only on strings.


Javascript DOM Modification: Inserting HTML Fragments

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

Member Description
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

Example: Javascript DOM : HTMLElement Fragments using insertAdjacentHTML method

Give it a TRY! » Note: The first parameter position value defines where to insert the HTML fragments.


Javascript DOM Modification: Insert Elements into the Text Blocks

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>

Example: Javascript DOM : HTMLElement Fragments using innerHTML and outerHTML

Give it a TRY! » Note: The new element <strong> is higlighted using