Alternative for innerHTML?

Question

I\'m wondering if there\'s a way to change the text of anything in HTML without using innerHTML.

Reason I\'m asking is because it\'s kinda frowned upon by the W3C. I

Answer 1

The recommended way is through DOM manipulation, but it can be quite verbose. For example:

// 
Hello, World!
var para = document.createElement('p');
para.appendChild(document.createTextNode('Hello, '));

// 
var b = document.createElement('b');
b.appendChild(document.createTextNode('World');
para.appendChild(b);

para.appendChild(document.createTextNode('!'));

// Do something with the para element, add it to the document, etc.

EDIT

In response to your edit, in order to replace the current content, you simply remove the existing content, then use the code above to fill in new content. For example:

var someDiv = document.getElementById('someID');
var children = someDiv.childNodes;
for(var i = 0; i < children.length; i++)
    someDiv.removeChild(children[i]);

But as someone else said, I'd recommend using something like jQuery instead, as not all browsers fully support DOM, and those that do have quirks which are dealt with internally by JavaScript libraries. For example, jQuery looks something like this:

$('#someID').html("
Hello, World!
");