HTML DOM Part-II

Create Node We can create a node in JavaScript dynamically. There are 3 types of Node –Comment –Element –Text Node We can also create an attribute for a tag.

Create Comment Node createComment(string) –Creates a text comment of the form, where string is the comment content. For ex: comNode=document.createComment(just a comment);

Create Element Tag createElement(tagName) –Creates an element of type tag, where tagName is the name of tag. For ex: newTagId = document.createElement(h1)

Create Text Node createTextNode(string) –Creates a text node containing string. For ex: newText = document.createTextNode(Some new text);

Create attribute We can dynamically create an attribute. createAttribute(attributeName) –Creates an attribute with attribute name as argument. –We will see an example of this later.

Join all stuff newNode = document.createElement(p); newText = document.createTextNode(new text); If I write this code in JavaScript, It wont display anything on browser. I need to join newNode and newText and insert them in the web page document to view it.

Insert a new Element Slide 3, 4, 5 taught us how to create a new Element. Slide 7 told us that, we need to insert new element to view it. This slide presents 2 methods of inserting new element in document web page. –insertBefore (newChild,referenceChild) –appendChild (newChild)

Insert and Append parentNode.insertBefore(newChild,referenceChild) –Inserts a new node as a child of parentNode. –newChild is inserted node referenceChild. –Please Note that, referenceChild is a child of parentNode. We want to insert newChild as a cahild of parentNode but before referenceChild parentNode.appendChild(newChild) –Insert a new node as a child of parentNode. –newChild is inserted as the last Node or last Children of parentNode. For ex: Dom Insert and Append

Example Continue……. Insert the code in the function insertBefore() { textId = document.getElementById(field1); refChild = document.getElementById(innerDiv); var newPara = document.createElement(p); var newText = document.createText(textId.value); // insert a new Node as child of newPara. newPara.appendChild(newText); if(refChild.parentNode) // does node innerDiv has parent Node { parentId = refChild.parentNode; // get the Id of parent Node //insert new node, i.e. newPara, as a child of outerDiv but before innerDiv. parentId.insertBefore(newPara,refChild); }