...

View Full Version : newbie question about DOM and nodeValue



deadseasquirrel
05-21-2004, 09:19 PM
I am a real newbie and I don't know why I'm having such a hard time understanding DOM, and when I am pointing to a DOM object or pointing to the text in a DOM object. But anyway I have this snippet right here:

var childNum = 10;
var tempCenter = document.createElement("div");
tempCenter.setAttribute("class", "center");
tempCenter.nodeValue = "Test " + childNum;

Does this, sort of speak, create this:
<div class="center">Test 10</div>

That is what I'm trying to do but I don't see anything. Any help would be appeciated.

sad69
05-21-2004, 09:27 PM
To create this:


<div class="center">Test 10</div>


You'd do something like this:


var childNum = 10;
var tempCenter = document.createElement("div");
tempCenter.setAttribute("className", "center");
var tempText = document.createTextElement("Test " + childNum);
tempCenter.appendChild(tempText);


However, you still have to append tempCenter to something, like body or something..


document.getElementsByTagName("body").item(0).appendChild(tempCenter);


I think that should do it.. if anyone objects, please do.

Sadiq.

liorean
05-21-2004, 09:36 PM
var childNum = 10;
var tempCenter = document.createElement("div");
tempCenter.setAttribute("className", "center");
var tempText = document.createTextElement("Test " + childNum);
tempCenter.appendChild(tempText);
Element --> Node

sad69
05-21-2004, 09:38 PM
Element --> Node

Oops! My bad.. :o

Thanks liorean :thumbsup:
Sadiq.

deadseasquirrel
05-21-2004, 09:43 PM
There is another issue I am having with my attributes. My snippet code looks something like this:



tempCenter = document.createElement("div");
tempCenter.setAttribute("class", "center");
tempDiv = document.createElement("div");

tempDiv.setAttribute("id", "city");
tempDiv.appendChild(document.createTextNode("New York City"));
tempCenter.appendChild(tempDiv);

tempDiv.setAttribute("id", "address");
tempDiv.appendChild(document.createTextNode("1440 Broadway 9th Floor"));
tempCenter.appendChild(tempDiv);

newStateCenters.appendChild(tempCenter);
stateInfo.replaceChild(newStateCenters, stateCenters);
stateCenters = document.getElementById("statecenters");

alert(stateCenters.outerHTML);

minus all the declaration of the variables. but when I see the alert. It looks something like this:

<div id=statecenters></div> That is without the quotation marks, and that is screwing up my css. Has anybody ever seen something like that?

sad69
05-21-2004, 09:59 PM
I don't even know what the heck you're doing there!


tempCenter = document.createElement("div");
tempCenter.setAttribute("className", "center");

tempDiv = document.createElement("div");
tempDiv.setAttribute("id", "city");
tempDiv.appendChild(document.createTextNode("New York City"));
tempCenter.appendChild(tempDiv);

//You haven't created a new element here.. so you're overwriting the DIV with id city
tempDiv.setAttribute("id", "address");
tempDiv.appendChild(document.createTextNode("1440 Broadway 9th Floor"));
tempCenter.appendChild(tempDiv); //re-appending the same element

//okay what is newStateCenters, stateInfo, and stateCenters?
newStateCenters.appendChild(tempCenter);
stateInfo.replaceChild(newStateCenters, stateCenters);
stateCenters = document.getElementById("statecenters");

alert(stateCenters.outerHTML); //outerHTML or innerHTML?


If you haven't set newStateCenters id to statecenters, you won't get it. When you use replaceChild() (as far as I know..) you remove that reference to that node, and the reference is returned by the function replaceChild(). If you don't save that reference in a variable, it's gone.

Check out my comments in the code and see if that helps. Or else reply back and let me know what you're trying to do.

Sadiq.

deadseasquirrel
05-21-2004, 10:07 PM
Sorry I didn't include all the code, but the html that it is suppose to create, should look something like this:

<div id="stateinfo">
<div id="statename">South Carolina</div>
<div id="statecenters">
<div class="center">
<div id="city">Birmingham</div>
</div>
</div>
</div>

And I defined those other variables up top. Thanks for the tip about className, though that is kind of weird. The other problem I have that is not very XHTML is that when I do the alert(stateCenters.outerHTML) (which I do want the outer because I want the tags, I think), all the tag names are in capital. How do I get them to to lower-case.

sad69
05-21-2004, 10:15 PM
I don't think you can change that.. innerHTML or outerHTML will change everything to capitals. When you do this:


tempCenter = document.createElement("div");


It creates this:


<DIV></DIV>


Not sure why it really matters though..


alert(stateCenters.outerHTML.toLowerCase());


This will make the WHOLE code lowercase, not just the tag names.. don't see an easy fix for that, unless you run it through some long regex that covers all the html tags..

Sadiq.

liorean
05-21-2004, 10:20 PM
Use tempCenter.className='center'; instead of tempCenter.setAttribute('className', 'center'); The correct thing would be to use tempCenter.setAttribute('class','center');, but iew doesn't support that, so you have to do it the former way instead.


As for the case, since HTML is case insensitive, the DOM returns all element and attribute names in uppercase in an effort of consistency. If you want to change that, you need to either change it manually or change to XML/XHTML, which is case sensitive.

deadseasquirrel
05-21-2004, 10:29 PM
Thanks for the tip. Yeah, I noticed that cap thing which is making me nervous. Which one is the more standard way of setting attributes, tempCenter.attrib = "something" or tempCenter.setAttribute('attrib', 'something').

Also does it matter if I use single or double quotes?

One final final thing, the only reason I care about what case the alert(stateCenters.outerHTML) outputs in, is because my header specifies that the document is XHTML-transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

and if all my javascripts and DOM stuff is creating uppercase tags, that will definitely be a problem. But I am getting it done without any error messages, so I'm not sure what to make of it.

brothercake
05-21-2004, 11:24 PM
In most cases setAttribute is the way, but for class and style it doesn't work in Win/IE, so you have to go obj.className and obj.style.prop - there's no need to create those attributes first because they always exist, as an empty string or null value if nothing else.

Single or double quotes don't matter which, but you can't start a string with one and end it with the other.

Regarding innerHTML - why do you need it anyway? sure, alert() for manual error checking, but if you're probing the DOM for data there are better ways to get at it.

deadseasquirrel
05-22-2004, 05:20 AM
What is the better way of probing the DOM for data for error checking? Sometimes I just want to see what I have a handle on and I haven't actually figured out a good method of error checking yet. I am not using innerHTML for creation of my html, because I am going the DOM route, and innerHTML kind of usurp that whole theory. I am just using innerHTML and outterHTML as error checking.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum