Jump to content

Confused with HTML Dom


Maximus
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...