Modifying the document

DOM modifications is the key to making pages dynamic. Using the methods described below, it is possible to construct new page elements and fill them on-the-fly.

Creating elements

There are following methods for creating new elements in DOM:

Creates a new DOM element of type node:

var div = document.createElement('div')
Creates a new DOM element of type text:

var textElem = document.createTextNode('Robin was here')

The createElement is the most commonly used method, but createTextNode is also good. It creates a text node that can be appended to another element.

For an empty element, creating a text node and appending it works much faster than innerHTML in most modern browsers.

But innerHTML is simpler and supports nested tags, so they both find their place in the world.



An element can also be cloned:

Clones an element deeply, with all descendants.
Clones an element only, with attributes, but without children.


<!DOCTYPE html>

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>

<p id="demo">Click the button to copy an item from one list to another</p>

<button onclick="myFunction()">Try it</button>

function myFunction()
var itm=document.getElementById("myList2").lastChild;
var cln=itm.cloneNode(true);

<p>Try changing the <em>deep</em> parameter to false, and only an empty LI element will be cloned.</p>

Adding elements

To do something with the element, you need to call the corresponding method of its parent:

Appends elem to the children of parentElem.The following example demonstrates creating and adding new element to BODY:

var div = document.body.children[0]

var span = document.createElement(‘span’)
span.innerHTML = ‘A new span!’

The new node becomes a last child of the parentElem.


parentElem.insertBefore(elem, nextSibling)
Inserts elem into the children of parentElem before the element nextSibling.The following example inserts a new node before the first child:


var div = document.body.children[0]

var span = document.createElement(‘span’)
span.innerHTML = ‘A new span!’
div.insertBefore(span, div.firstChild)

Note that you insertBefore with second argument null works as appendChild.


elem.insertBefore(newElem, null// same as


All insertion methods return the inserted node.

Removing nodes

There are two main methods for removing nodes from DOM:

Remove the elem from the children of parentElem.
parentElem.replaceChild(elem, currentElem)
Replace the child element of parentElem, referenced by currentElem with the elem.

Both of them return a removed node which can later be reinserted into the DOM.


If you want to move an element, you don’t have to remove it first.

elem.appendChild/insertBefore remove elem from it’s previous place automatically.

The following example moves the last child to the top of children list:

<div>First div</div>
<div>Last div</div>
var first = document.body.children[0]
var last = document.body.children[1]

document.body.insertBefore(last, first)

The removal occurs automatically when insertion methods are called for a node which already has a parent.


Tasks and examples

Write a function which removes an element from DOM without referencing its parent.

The syntax should be: remove(elem)



var elem = document.body.children[0]

function remove(elem) { /* your code */
remove(elem) // <– should remove the element

Open solution


The parent of elem is referenced by the parentNode property.

And better don’t forget to return the removed element for compatibility.

So the code can be like this:

function remove(elem) {
  return elem.parentNode.removeChild(elem)


Write a function insertAfter(elem, refElem) to insert elem right after refElem.


var elem = document.createElement(‘div’)
elem.innerHTML = ‘**Child**’

function insertAfter(elem, refElem) { /* your code */

insertAfter(elem, document.body.firstChild) // <— should work
insertAfter(elem, document.body.lastChild) // <— should work



To insert an element after refElem, we can insert it before refElem.nextSibling.

But what if there is no nextSibling? That means refElem is the last child of its parent, so we can just call appendChild.

The code:

function insertAfter(elem, refElem) {
var parent = refElem.parentNode
var next = refElem.nextSibling
if (next) {
return parent.insertBefore(elem, next)
} else {
return parent.appendChild(elem)

But the code could be much shorter if it used insertBefore null second argument feature:

function insertAfter(elem, refElem) {
    return elem.parentNode.insertBefore(elem, refElem.nextSibling)

If there is no nextSibling then the second argument of insertBefore becomes null and then insertBefore(elem,null) works as appendChild.

Write a function removeChildren to remove all children of an element.


function removeChildren(elem) { /* your code */

removeChildren(document.body) // makes BODY absolutely empty


First, let’s check a way how it shouldn’t be done

1 function removeChildren(elem) {
2   for(var k=0; k<elem.childNodes.length;k++) {
3     elem.removeChild(elem.childNodes[k])
4   }
5 }

If you check it in action – you’ll find that it doesn’t work.

That’s because childNodes always starts from 0, it autoshifts when first child is removed. But k increases +1 every iteration. So, k skips half of nodes.

The right solution:

1 function removeChildren(elem) {
2    while(elem.lastChild) {
3        elem.removeChild(elem.lastChild)
4    }
5 }

Another solution:

function removeChildren(elem) {
   elem.innerHTML = ''



Create an interface to generate the list.

For each item:

  1. Prompt the user for it’s contents.
  2. Create the item and append it to UL.
  3. The process ends when user presses ESC.

All elements must be created dynamically.

P.S. prompt returns null if user pressed ESC.


The solution is self-descriptive:


<h1>Creation of the list</h1>

var ul = document.createElement(‘ul’)

while (true) {
var data = prompt(“Enter the contents for the item”, “”)

if (data === null) {

var li = document.createElement(‘li’)


Note checking for null value as a loop-breaking condition. The prompt only returns it when ESC is pressed.

LI contents is populated by document.createTextNode to ensure proper work of <, > etc.


Creation methods:

  • document.createElement(tag) – creates a new element node.
  • document.createTextNode(value) – creates a new text node with given value
  • elem.cloneNode(deep) – clones the element

Inserting and removing methods are called from parent node. All of them return elem:

  • parent.appendChild(elem)
  • parent.insertBefore(elem, nextSibling)
  • parent.removeChild(elem)
  • parent.replaceChild(elem, currentElem)

Comments are closed.