Saturday 21 January 2012

Inserting dynamically any tag at any position in the HTML using JS and DOM

<
<
html xmlns="http://www.w3.org/1999/xhtml" >head><title>Untitled Page</title>



<script> function go() { var childNodes = document.body.childNodes // containing a array of Tags of body having DIV Tag at// childNodes[0]=Div Tag// childNodes[1]=UL Tag// childNodes[2]=Button Tag
var x=childNodes.item(1) //accessing the UL tag which has a index no 1 in childNodes array

ndiv.style.width=
ndiv.style.height=
ndiv.innerHTML=
ndiv.style.backgroundColor=
var ndiv=document.createElement("DIV");"200px";"100px";"I am New DIV created in JS function ";"skyblue"x.appendChild(ndiv);

}

</script> </
<
head>body>




<div id="d1">First Div defined in HTML Body has id no. d1 </div> <ul> <li>Bob</li> <li>Alice</li> </ul> <button onclick="go()" style="width:100px">Go!</button> </
</
body>html>

No comments:

Post a Comment