createElement

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
    </head> 
    <body> 
        <table border="1"> 
            <thead>
               <th>Name</th>
               <th>Color</th>
            </thead> 
            <tbody id="myBody"> 
               <tr>
                   <td>A</td>
                   <td>B</td>
               </tr> 
               <tr>
                   <td>C</td>
                   <td>D</td>
               </tr> 
        </tbody> 
    </table> 
    <button id="add">Add Element</button> 
    <button id="remove">Remove Element</button> 
    <script> 
        var tableBody = document.getElementById("myBody"); 
        document.getElementById("add").onclick = function() { 
            var row = tableBody.appendChild(document.createElement("tr")); 
            row.setAttribute("id", "newrow"); 
            row.appendChild(document.createElement("td")).appendChild(document.createTextNode("X")); 
            row.appendChild(document.createElement("td")).appendChild(document.createTextNode("Y")); 
        }; 
        document.getElementById("remove").onclick = function() { 
            var row = document.getElementById("newrow"); 
            row.parentNode.removeChild(row); 
        } 
    </script> 
</body> 
</html>
Click to view the demo
Home 
  JavaScript Book 
    DOM  

HTMLElement:
  1. The HTMLElement Members
  2. element tag name, id, direction, language, hidden disabled information
  3. addEventListener
  4. appendChild
  5. attributes returns a collection containing all of the attributes
  6. classList
  7. className
  8. cloneNode
  9. createElement
  10. createTextNode
  11. dataset
  12. getAttribute
  13. getElementsByTagName
  14. hasAttribute
  15. innerHTML
  16. insertAdjacentHTML
  17. insertBefore
  18. isSameNode
  19. outerHTML
  20. onmouseout
  21. onmouseover
  22. querySelectorAll
  23. removeEventListener