Modifying the document in DOM

Basically DOM modification is the key to making pages dynamic.

1. Creating elements
   
   
   • document.createElement(tag)
     
     Creates a new DOM element of type node:
     
     var div= document.createElement('div')
     
     
   • document.createTextNode(text)
     
     Creates a new DOM element of type text:
     
     var text = document.createTextNode('Abhijeet!!')
     
     
2. Adding elements
   
   If we want to do something with an element then we need to call the corresponding method of its parent:
   
   
   • parentElem.appendChild(elem)
     
     Appends elem to the children of parentElem.
     
     <div>
     ...
     </div>
     <script>
     var abhi = document.body.children[0]
     var cam = document.createElement('cam')
     cam.innerHTML = 'hello world!'
     abhi.appendChild(cam)
     </script>
     
     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.
     
     Here is an example that inserts a new node before the first child:
     
     <div>
     ...
     </div>
     <script>
     var abhi = document.body.children[0]
     var cam = document.createElement('cam')
     cam.innerHTML = 'hello world!'
     abhi.insertBefore(cam, abhi.firstChild)
     </script>
     
     
3. Removing nodes
   
   
   • parentElem.removeChild(elem)
     
     Remove elem from the children of parentElem.
     
     
   • parentElem.replaceChild(elem, currentElem)
     
     Replace the child element of parentElem, referenced by currentElem with the elem.