Forum Moderators: open
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>innerHTML/Node Demo I</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;}
#divOne{height:50%;background:#dde;}
#divTwo{height:50%;background:#edd;}
#divOne td{border:3px solid #acb;}
#divTwo td{border:3px solid #b8a;}
</style>
<script type="text/javascript">
// A simple example of using the innerHTML non-standard (but well-supported) DOM method
// vs. the W3C node/child DOM - compares/contrasts innerHTML's facility at HTML-input
// rendering and node model's easy insertion methods.
// Note that the node methods are more efficient internally as they bypass the
// HTML parser to more directly manipulate the rendering engine.
function demoInnerHTML(){
var new_txt=prompt('Please enter new text:','new <br \/><br \/><b>text<\/b>');
document.getElementById("tdOne").innerHTML+="<br \/>"+new_txt;
}
function nodeWork(){
var new_txt=prompt('Please enter new text:','new <br \/><b>text<\/b>');
var insSpan=document.createElement("span");
var insTd=document.getElementById("tdTwo");
insSpan.appendChild(document.createTextNode(new_txt));
insSpan.appendChild(document.createElement("br"));
insTd.insertBefore(insSpan,insTd.lastChild);
}
</script>
</head>
<body>
<div id="divOne">
<p>
<a href="#" onclick="demoInnerHTML();return false;">Demo innerHTML</a>
</p>
<table>
<tr>
<td id="tdOne">some text</td>
</tr>
</table>
</div>
<div id="divTwo">
<p>
<a href="#" onclick="nodeWork();return false;">Insert a node</a>
</p>
<table>
<tr>
<td id="tdTwo"><span>some text </span><br /><span>and other text</span></td>
</tr>
</table>
</div>
</body>
</html>
