/*
Mastering JavaScript, Premium Edition
by James Jaworski
ISBN:078212819X
Publisher Sybex CopyRight 2001
*/
<html>
<head><title>Dynamically Generated HTML</title>
<script language="JavaScript">
function initializeDiv() {
div = document.getElementById("testdiv")
}
function insertElement() {
var tagIX = document.forms["genform"].elements["elementType"].selectedIndex
var tagName = "p"
if(tagIX == 1) tagName = "h1"
else if(tagIX == 2) tagName = "blockquote"
else if(tagIX == 3) tagName = "pre"
var text = document.forms["genform"].elements["ta"].value
var newElement = document.createElement(tagName)
var newText = document.createTextNode(text)
newElement.appendChild(newText)
div.appendChild(newElement)
}
function deleteElement() {
if(div.hasChildNodes()) {
var children = div.childNodes
var n = children.length - 1
var lastChild = children.item(n)
div.removeChild(lastChild)
}
}
</script>
</head>
<body onload="initializeDiv()">
<h1 align="center">Dynamically Generated HTML</h1>
<hr align="center">
<div id="testdiv">
</div>
<hr align="center">
<form name="genform">
<p><b>Tag: </b><select name="elementType" size="1">
<option selected="true">P
<option>H1
<option>BLOCKQUOTE
<option>PRE
</select>
<input type="button" value="Insert element" onclick="insertElement()">
<input type="button" value="Delete element" onclick="deleteElement()"></p>
<textarea name="ta" rows="5" cols="40">
Text of element goes here.
</textarea>
</form>
</body>
</html>
|
