You may as well ask "how do I write an HTML page?".
The basic problem is how you identify what needs to be changed and
then how you change it. You have to consider any attributes that the
replaced content may have and whether you want the new content to
retain those attributes - e.g. style and event handlers.
You also have to consider what the user will do with the content - is
a form (or some form controls), part of a table or an entire table, a
bit of unformatted text or something else?
innerHTML is normally used to completely replace the content of an
element where the replacement has markup in it. Otherwise, DOM
methods can be used. If you are updating the value of an input or
textarea element, you don't need either method - you just update the
element's value.
If you want to add or remove rows or cells from a table, then DOM is
the best way to go. However, the additional feature testing and work-
arounds for browser inconsistencies may be more than some are prepared
to undertake.
It would be much better if you describe what you are trying to do,
then you may get suggestions on solutions using different approaches.
A simple example of replacing the plain text in an element (without
any feature testing or other fallback) is:
<script type="text/javascript">
function updateUsingDOM (id, newText) {
var el = document.getElementById(id);
while (el.firstChild){
el.removeChild(el.firstChild);
}
el.appendChild(document.createTextNode(newText));
}
function updateUsingInnerHTML (id, newText) {
var el = document.getElementById(id);
el.innerHTML = newText;
}
</script>
<form action=""><div>
<input type="text" name="txt">
<input type="button" value="Update using DOM"
onclick="updateUsingDOM('xx', this.form.txt.value);">
<input type="button" value="Update using innerHTML"
onclick="updateUsingInnerHTML('xx', this.form.txt.value);">
</div></form>
<div id="xx"></div>
