Html dom part-ii

1,912 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,912
On SlideShare
0
From Embeds
0
Number of Embeds
1,429
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html dom part-ii

  1. 1. HTML DOM Part-II
  2. 2. Create Node <ul><li>We can create a node in JavaScript dynamically. </li></ul><ul><li>There are 3 types of Node </li></ul><ul><ul><li>Comment </li></ul></ul><ul><ul><li>Element </li></ul></ul><ul><ul><li>Text Node </li></ul></ul><ul><li>We can also create an attribute for a tag. </li></ul>
  3. 3. Create Comment Node <ul><li>createComment (string) </li></ul><ul><ul><li>Creates a text comment of the form </li></ul></ul><ul><ul><li><!- - string - ->, where string is the comment content. </li></ul></ul><ul><ul><li>For ex: </li></ul></ul><ul><ul><li>comNode= document.createComment (“just a comment”); </li></ul></ul>
  4. 4. Create Element Tag <ul><li>createElement (tagName) </li></ul><ul><ul><li>Creates an element of type tag, where tagName is the name of tag. </li></ul></ul><ul><ul><li>For ex: </li></ul></ul><ul><ul><li>newTagId = document.createElement (“h1”) </li></ul></ul>
  5. 5. Create Text Node <ul><li>createTextNode (string) </li></ul><ul><ul><li>Creates a text node containing string. </li></ul></ul><ul><ul><li>For ex: </li></ul></ul><ul><ul><li>newText = document.createTextNode(“Some new text”); </li></ul></ul>
  6. 6. Create attribute <ul><li>We can dynamically create an attribute. </li></ul><ul><li>createAttribute (attributeName) </li></ul><ul><ul><li>Creates an attribute with attribute name as argument. </li></ul></ul><ul><ul><li>We will see an example of this later. </li></ul></ul>
  7. 7. Join all stuff <ul><li>newNode = document.createElement(“p”); </li></ul><ul><li>newText = document.createTextNode(“new text”); </li></ul><ul><li>If I write this code in JavaScript, It wont display anything on browser. </li></ul><ul><li>I need to join newNode and newText and insert them in the web page document to view it. </li></ul>
  8. 8. Insert a new Element <ul><li>Slide 3, 4, 5 taught us how to create a new Element. </li></ul><ul><li>Slide 7 told us that, we need to insert new element to view it. </li></ul><ul><li>This slide presents 2 methods of inserting new element in document web page. </li></ul><ul><ul><li>insertBefore (newChild,referenceChild) </li></ul></ul><ul><ul><li>appendChild (newChild) </li></ul></ul>
  9. 9. Insert and Append <ul><li>parentNode.insertBefore (newChild,referenceChild) </li></ul><ul><ul><li>Inserts a new node as a child of parentNode. </li></ul></ul><ul><ul><li>newChild is inserted node referenceChild. </li></ul></ul><ul><ul><li>Please Note that, referenceChild is a child of parentNode. We want to insert newChild as a cahild of parentNode but before referenceChild </li></ul></ul><ul><li>parentNode.append Child(newChild) </li></ul><ul><ul><li>Insert a new node as a child of parentNode. </li></ul></ul><ul><ul><li>newChild is inserted as the last Node or last Children of parentNode. </li></ul></ul><ul><li>For ex: </li></ul><ul><li><body> </li></ul><ul><li><h1>Dom Insert and Append</h1> </li></ul><ul><li><hr> </li></ul><ul><li><div id=“outerDiv”style=“background-color:#66ff00;”> </li></ul><ul><li><div id=“innerDiv” style=“background-color:#ffcc00”> </div> </li></ul><ul><li></div> </li></ul><ul><li><form id=“form1” action=“#” method=“get”> <input type=“text” id=“field1”> </li></ul><ul><li><input type=“button” value=“Insert Before” onClick=insertBefore()> </li></ul><ul><li></form> </li></ul><ul><li></body> </li></ul>
  10. 10. Example Continue……. <ul><li>Insert the code in the <head> </li></ul><ul><li><script language=“JavaScript”> </li></ul><ul><li>function insertBefore() </li></ul><ul><li>{ </li></ul><ul><li>textId = document.getElementById(“field1”); </li></ul><ul><li>refChild = document.getElementById(“innerDiv”); </li></ul><ul><li>var newPara = document.createElement(“p”); </li></ul><ul><li>var newText = document.createText(textId.value); </li></ul><ul><li>// insert a new Node as child of newPara. </li></ul><ul><li>newPara.appendChild(newText); </li></ul><ul><li>if(refChild.parentNode) // does node innerDiv has parent Node </li></ul><ul><li>{ </li></ul><ul><li>parentId = refChild.parentNode; // get the Id of parent Node </li></ul><ul><li>//insert new node, i.e. newPara, as a child of outerDiv but before innerDiv. </li></ul><ul><li>parentId.insertBefore(newPara,refChild); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>

×