Way(s) to dynamically change text content

[michael]

I have an html text string within a div, eg.:

<div id="example">Text text text</div>

I know its easy to change styles by using getElementById - for example:

document.getElementById("example").style.fontColor="#ff0000";

But what way(s) are there to change the actual text content itself on the
page dynamically, from "Text text text" to"Bla bla bla" ?

Can it be done with JS/CSS?

 

[Hywel Jenkins]

I have an html text string within a div, eg.:

<div id="example">Text text text</div>

I know its easy to change styles by using getElementById - for example:

document.getElementById("example").style.fontColor="#ff0000";

But what way(s) are there to change the actual text content itself on the
page dynamically, from "Text text text" to"Bla bla bla" ?

Can it be done with JS/CSS?

document.getElementById('example').innerHTML = 'New text';

 

[Martin Honnen]

I have an html text string within a div, eg.:

<div id="example">Text text text</div>

But what way(s) are there to change the actual text content itself on the
page dynamically, from "Text text text" to"Bla bla bla" ?

It is possible to set the text, to cope with various browsers from IE 4,
5, 6, Netscape 6, 7, Mozilla, Opera 7, 8 and other DOM compliant
browsers you can use:


function setInnerText (elementId, text) {
var element;
if (document.getElementById) {
element = document.getElementById(elementId);
}
else if (document.all) {
element = document.all[elementId];
}
if (element) {
if (typeof element.textContent != 'undefined') {
element.textContent = text;
}
else if (typeof element.innerText != 'undefined') {
element.innerText = text;
}
else if (typeof element.removeChild != 'undefined') {
while (element.hasChildNodes()) {
element.removeChild(element.lastChild);
}
element.appendChild(document.createTextNode(text));
}
}
}


setInnerText('example', 'Kibology for all.')

 

[michael]

Thanks - that solved my problem.