<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#container {width:100%; text-align:center; }
#heading {width:100%; text-align:center; }
</style>
<script type="text/javascript">
// simple way:
function replace_text(text) {
var heading = document.getElementById('heading');
heading.innerHTML = '<h1>' + text + '</h1>';
}
// complicated way:
function replace_text2(text) {
var heading = document.getElementById('heading');
var node = heading.childNodes[0];
while ( node && node.nodeType!=1 && node.tagName!='H1' ){
//console.log(node.nodeType,node);
node = node.nextSibling;
}
if (node) {
node.replaceChild(document.createTextNode(text),node.childNodes[0]);
}
}
</script>
</head>
<div id="heading">
<h1>hello</h1>
</div>
<body>
<div id="container">
<textarea name="mytextarea" cols="60" rows="10">HELLO</textarea>
</div>
<input type="button" onclick="replace_text(document.getElementsByName('mytextarea')[0].value);" value="Update header 1" />
<input type="button" onclick="replace_text2(document.getElementsByName('mytextarea')[0].value);" value="Update header 2" />
<input type="button" onclick="replace_text('Hello! 3');" value="Update header 3" />
<input type="button" onclick="replace_text2('Hello! 4');" value="Update header 4" />
</body>
</html>