DOM Using AJAX
In this article i will tell how to create DOM programmatically.Before creating DOM Elements i have given a sample program which i going to create using DOM
<body>
Hello Dude! Here’s a cool list of colors for you:
<br/>
<div id=”myDivElement”>
<ul>
<li>Black</li>
<li>Orange</li>
<li>Pink</li>
</ul>
</div>
</body>
Know i am going to create the above program using JavaScript by declaring as a string.
<html>
<head>
<title>Client Side Techniques</title>
<script type=”text/javascript” src=”call.js”></script>
</head>
<body onload=”process()”>
Hai see the beautiful list of colors
<br/>
<div id=”myDivElement” />
</body>
</html>
Call.js
function process()
{
var string;
string = “<ul>”
+ “<li>Black</li>”
+ “<li>Orange</li>”
+ “<li>Pink</li>”
+ “</ul>”;
myDiv = document.getElementById(“myDivElement”);
myDiv.innerHTML = string;
}
Know i will create the above program using DOM
<html>
<head>
<title>DOM Demo</title>
<script type=”text/javascript” src=”Dom-Demo1.js”></script>
</head>
<body onload=”process()”>
<br/>
<div id=”myDivElement” />
</body>
</html>
function process()
{
text=document.createTextNode(“Here is a cool list of colors:”);
ul=document.createElement(“ul”);
liBlack=document.createElement(“li”);
textBlack=document.createTextNode(“Black”);
liBlack.appendChild(textBlack);
liOrange=document.createElement(“li”);
textOrange=document.createTextNode(“Orange”);
liOrange.appendChild(textOrange);
liBlue=document.createElement(“li”);
textBlue=document.createTextNode(“Blue”);
liBlue.appendChild(textBlue);
ul.appendChild(liBlack);
ul.appendChild(liOrange);
ul.appendChild(liBlue);
myDiv = document.getElementById(“myDivElement”);
// add content to the <div> element
myDiv.appendChild(text);
myDiv.appendChild(ul);
}
The program works fine but it will be grt if u briefly tell about what exactly about DOM
Kishore
May 13, 2009 at 10:50 am