<!-- JavaScript:DOM code snippet 5. -->
<!-- Target a specific node in the document using document.getElementById()'
and add text to the web page from a form field. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- Code source: http://www.justfigures.co.uk/ -->
<!-- A resource for web developers using XHTML, CSS, JavaScript, PHP -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View code snippet page</title>
<script language="JavaScript" type="text/javascript">
/* add text to a web page */
function addNode(nodeID,text) {
// create the paragraph node
var paraNode = document.createElement('p');
// create a text node for the paragraph node
var textNode = document.createTextNode(text);
// add the text node to the paragraph node as a child
paraNode.appendChild(textNode);
// add the paragraph node and text node child to the web page
document.getElementById(nodeID).appendChild(paraNode);
}
</script>
</head>
<body><h1 id="heading1">You are welcome to add a comment here:</h1><div id="commentText"></div>
<form name="commentForm" id="commentForm">
Please write a comment.<br />
<textarea name="comment" rows="10" cols="30">Write comment here</textarea><br />
</form>
<form name="actionForm" id="actionForm">
<input type="button" value="Click me to add a comment" onclick="addNode('commentText',document.commentForm.comment.value)" />
</form>
</body>
</html>