Supposing we have the following element <p id="abc">Hello World</p>. If I want to modify the content in the <p> tag I have two ways in the javascript code:
document.getElementById("abc").innerHTML="good morning";
document.getElementById("abc").firstChild.nodeValue="good morning";
The questions are:
The first one will erase any HTML elements that might be inside your target element. The second will only work if the first child is a text node (a common mistake is to try and use it on an empty element).
The second is "more correct" (innerHTML is really a haxy shortcut) but the first is certainly more reliable. That said, it is vulnerable to XSS injections.
To be completely correct, you would do this:
var abc = document.getElementById('abc');
while(abc.firstChild) abc.removeChild(abc.firstChild);
abc.appendChild(document.createTextNode("good morning"));
