Friday, February 20, 2015

Changing structure of HTML

JavaScript provide calls to add and remove node from a HTML DOM.

createElement()
createTextNode()
appendChild()
removeChild()

For example,

var tagid = document.getElementById("about");  /*position to the tag*/
var p = document.createElement("p"); /*create a new element but not hang to the DOM tree yet*/
var textblk = p.creatTextNode("This is a newly created text block"); /*wrap it under a text node*/
tagid.appendChild(textblk); /*hang to the DOM tree*/

Once you have position to a node, you can use these calls to move around the position:

parentNode
previousSibling
nextSibling
firstChild
lastChild

For example,

document.getElementById("about").parentNode.setAttribute("class")

No comments: