appendchild in Document Object Model

Document Object Model (DOM) contains node, element and attribute.
1)  Node is a reference to an element, including node name, nodeValue and nodeType
example:
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
Here nodeName of a text node is always #text, i.e. document.write(x.firstChild.nodeValue) return #text
document.write(x.firstChild.nodeType) return 3 as text nodtype is 3. document.write(x.firstChild.nodeValue); return Hello World!
Element type NodeType is shown as follows:
Element 1; Attribute 2; Text 3; Comment 8; Document 9

2) Element is  a representation of a <TAG>.  element.getElementsByTagName(tagName) returns a list of elements with the given tag name, where element can be obtained  via document.getElementById.

3) Attribute is a  property of an element. For example HREF is an attribute of <A>.

 Below is the code example using node and appendchild:

 <div id="extra-dates"></div>
                      <script>
                  var count = 0;
                  function add_date(){
                     count ++;
                     var date_table     = document.getElementById('date-table');
                     var new_date_table = date_table.cloneNode(true);
                     new_date_table.id  = 'd'+count+'_table';
                   
                     var elms = new_date_table.getElementsByTagName('*');
                     for(var i=0; i<elms.length; i++){
                        elms[i].id = 'd'+count+'_'+elms[i].id;
                     }
                   
                     var date_selects     = date_table.getElementsByTagName('select');
                     var new_date_selects = new_date_table.getElementsByTagName('select');
                     for(var i=0; i<date_selects.length; i++){
                        new_date_selects[i].selectedIndex = date_selects[i].selectedIndex;
                     }
                     document.getElementById('extra-dates').appendChild(new_date_table);
                  }
                  function remove_date(link_id){
                     var id_parts = link_id.split('_');
                     var table_id = id_parts[0]+'_table';
                     var date_table = document.getElementById(table_id);
                     date_table.parentNode.removeChild(date_table);
                  }
               </script>

I used cloneNode to create a new node and use appendChild to add node content between

 <div id="extra-dates"> and </div> and use removeChild to remove the node.