Confused with HTML Dom

[Maximus]

Most of the tutorials at w3schools are exellent (php, html), however the DOM ones are really bad, in my opinion, because they fail to explain it properly. At least I was really confused after reading through it.All I want to know, is how to change the text in a div..., the simplest thing, and that isen't even on w3schools (correct me if I am wrong).

<div id="response_register">default-text</div>document.getElementById("response_register").firstChild.data='new-text';

The above will output (when used in/with a JS function):new-textdefault-textThis is what I want, but I when I use html formatting like <font color=red>Hello</font> it displays the html code as well, without changing the color. Anyone know how to do that? I also experimented with the innderHTML property, to no success.

[jesh]

The innerHTML property is the way to go: http://www.w3schools.com/htmldom/prop_anchor_innerhtml.asp

<div id="response_register" onclick="this.innerHTML = 'new-text'">default-text</div>

To change the color of the element as well, you can do something like this:

<div id="response_register" onclick="updateElement()">default-text</div><script type="text/javascript">function updateElement(){	var element = document.getElementById("response_register");	element.innerHTML = "new-text";	element.style.color = "#ff0000";}</script>

[Maximus]

The innerHTML property is the way to go: http://www.w3schools.com/htmldom/prop_anchor_innerhtml.asp

<div id="response_register" onclick="this.innerHTML = 'new-text'">default-text</div>

To change the color of the element as well, you can do something like this:

<div id="response_register" onclick="updateElement()">default-text</div><script type="text/javascript">function updateElement(){	var element = document.getElementById("response_register");	element.innerHTML = "new-text";	element.style.color = "#ff0000";}</script>

Not really what I'm looking for...see this is all part of a bigger JS function that submits a form via ajax and displays the result.document.getElementById("response_register").firstChild.data=req.responseText;document.getElementById("response_register").innerHTML.style.color="#FF0000"; I just need to change the color of "req.responseText". I tried the above code, but it doesnt work, just displays the text returned by the server, WITHOUT color.

[jesh]

Try this instead:

var element = document.getElementById("response_register");element.innerHTML = req.responseText;element.style.color = "#ff0000";

You'll set the responseText to the innerHTML of the div, then you'll style the div afterwords. The contents of the div should then be red.

[Maximus]

Yes that worked! However, one last thing.I used the firstChild.data before because it added the "new text" (req.responseText) to the existing div. The code you gave me merly clears the div and displays the text.I tried going:

var element = document.getElementById("response_register");element.innerHTML = req.responseText + element;element.style.color = "#ff0000";

That displays the text and "[object HTMLDivElement]" (no quotes). Ugh.

[Webworldx]

+ element.innerHTML

[jesh]

If you want to append the new text to the end of the content, you can do this:

element.innerHTML += req.responseText;

If, on the other hand, you want the text to appear before the content, you can do as Webworldx suggested and use:

element.innerHTML = req.responseText + element.innerHTML;

[Maximus]

Thank you, that works.Lastly, is there a way to make the newly added text in red, and leave the existing text's color alone?Right now the script changes the color of the default/old text as well...