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.
