Change text inside <h2> Text I would change </h2> element using javascript

Question

I need to change the text inside HTML element using javascript, but I have no idea about how to do it. ¿Any help?

I've got it defined like:

<h2 id="something">Text I want to change.</h2>

Im trying to do it with:

document.getElementById("something").value = "new text";

But it doesn't work.

Thanks

• adeneo: You should use jQuery for that, it works everywhere.

Answer 1

You can use innerHTML :

document.getElementById("something").innerHTML = "new text";

Answer 2

If the element only contains text, textContent works better and faster than innerHTML

document.getElementById("something").textContent = 'new text';

Good luck :)

Answer 3

Though the following code would be the fastest alternative to slow .innerHTML:

var element = document.getElementById('something');
// removing everything inside the node
while (element.firstChild) {
 element.removeChild(element.firstChild);
}
// appending new text node
element.appendChild(document.createTextNode('new text'));

And here is the benchmark:

JSPerf

JSPerf: http://jsperf.com/replace-text-in-node

• erosman: (just for info) You can also remove all child nodes with element.textContent = ''; ... textContent on its own (as in my suggestion) performs well JSPref