How to add child to a HTML element in Javascript

Add a child

The following code adds a click event listener to a button. When you click the button it adds table row to SurveysBody table.

Example


<!DOCTYPE HTML> 
<html> 
    <body> 
        <table border="1"> 
            <tbody> 
                <tr><td>A</td><td>B</td></tr> 
                <tr id="apple"><td>C</td><td>D</td></tr> 
            </tbody> 
        </table> 
        <br/>
        <table border="1"> 
            <tbody id="SurveysBody"> 
                <tr><td>E</td><td>F</td></tr> 
            </tbody> 
        </table> 
        <p> 
            <button id="move">Move Row</button> 
        </p> 
        <script> 
            document.getElementById("move").onclick = function() { 
                var elem = document.getElementById("apple"); 
                document.getElementById("SurveysBody").appendChild(elem); 
            }; <!--from w w  w.j  a  v  a2  s.  c o m-->
        </script> 
    </body> 
</html>

Click to view the demo





















Home »
  Javascript »
    Javascript Reference »




Array
Canvas Context
CSSStyleDeclaration
CSSStyleSheet
Date
Document
Event
Global
History
HTMLElement
Input Element
Location
Math
Number
String
Window