Skip to main content

Working with the DOM




<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DOM Tree 2</title>
</head>
<body>
<h1 id="hdr1">
This is the Header</h1>
<p id="p1">
This is a paragraph of text.</p>
<ul id="ul1">
<li>List Item 1</li>
<li>List Item 2</li>
</ul>

<script type="text/javascript">
// Get a node reference to the header element
var hdr = document.getElementById("hdr1");
// Use that reference to change the text/data.
hdr.firstChild.data = "My Dynamically written Header Text";
// Get a node reference to the paragraph element
var paragraph = document.getElementById("p1");
// Use that reference to change the text/data.
paragraph.firstChild.data = "This represents the new text of the first paragraph.";
// Get a node reference to the ul element
var ul = document.getElementById("ul1");
// Using the parentNode (in this case the ‘body’ element), remove that child element
paragraph.parentNode.removeChild(ul);
// create a new Text node for the second paragraph
var newTextNode = document.createTextNode("This text is the second set of paragraph text");
// create a new Element to be the second paragraph
var newElementNode = document.createElement("p");
// put the text in the paragraph
newElementNode.appendChild(newTextNode);
// and put the paragraph on the end of the document by appending it to
// the BODY (which is the parent of para)
paragraph.parentNode.appendChild(newElementNode);
</script>

</body>
</html>

Comments

Popular posts from this blog