javaScript create html dom Nodes

creating Elements methods

the createElement() method is used to creates an element node with the specified name.

      var     obj = document.createElement(tagname);
  • tagname : is string type specifies the name of the element you want to create
   <script>
   
               var   p   =  document.createElement("p") ;
               
               var   img =  document.createElement("img");
 </script>              

the javascript provide a createTextNode() method creates a text node with the specified text.

      var  text =  document.createTextNode('text')
  • text : is a String containing the text to be put in the text node.
   <script>
   
             var   p_text   =  document.createTextNode("this is paragraph text");
               
             var   div_text =  document.createTextNode("google.com");
</script>             

adding elements

the appendChild() method appends a node as the last child of a node.

        element.appendChild(child)
  • element is the parent element.
  • child is the node object you want to append.

note : To add a new element to the HTML DOM, you must create the element node first, and then append it to an existing element.

this example uses the appendChild method to add an <li> item to an unordered list.

   <body>
           <ul  id="menu">
                   
                   <li>google.com</li>
                   
                   <li>yahoo.com</li>
                   
                   <li>linkedin.com</li>
          </ul>         
   
   <script>
                                                          // this code creates a new <li> element
     
     var    li_node = document.createElement("li");
                  
                                                                      //this code creates a text node
    
     var    text_node = document.createTextNode("facebook.com");
                  
                                         //after you must append text node to the <li> element 
                          
              li_node.appendChild(text_node);
                          
                            // this code access element and append the new created <li> element
          
        document.getElementById("manu").appendChild(li_node);                    
          
          </script>   
</body>                    

the insertBefore() method inserts an element into the document hierarchy as a child node of a parent object.

        parent.insertBefore(newElement, existElement)
  • parent         : the parent of the newly inserted node.
  • newElement  : the node to insert.
  • existElement : the child node you want to insert the new node before.

note : if existElement is null, newElement is inserted at the end of the list of child nodes.

this example uses the insertBefore method to add an <li> item to an unordered list.

   <body>
           <ul  id="menu">
                   
                   <li>ebay.com</li>
                   
                   <li id="ya" >amazon.com</li>
                   
                   <li>w3webtutorial.com</li>
          </ul>         
   
   <script>
                                                          // this code creates a new <li> element
     
     var    li_node = document.createElement("li");
                  
                                                                      //this code creates a text node
    
     var    text_node = document.createTextNode("www.w3.org");
                  
                                         //after you must append text node to the <li> element 
                          
              li_node.appendChild(text_node);
              
     var   existElement = document.getElementById("ya");
                          
//access element and insert the new created <li> element before the second child of <ul>
          
        document.getElementById("manu").insertBefore(li_node, existElement);                    
          
          </script> 
            
</body>                    

the createComment() method creates a new comment node with the specified text.

syntax:

         var commentNode =  document.createComment(text)
  • text : a string containing the text to be added to the comment.
   <script>
      
var   com  =  document.createComment

                 ("create comment is used to create comment node");
              
   </script>