change text with javascript

<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>