Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Feb 2004
    Posts
    192
    Thanks
    0
    Thanked 0 Times in 0 Posts

    newbie question about DOM and nodeValue

    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.

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To create this:
    Code:
    <div class="center">Test 10</div>
    You'd do something like this:
    Code:
    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..
    Code:
    document.getElementsByTagName("body").item(0).appendChild(tempCenter);
    I think that should do it.. if anyone objects, please do.

    Sadiq.

  • #3
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Quote Originally Posted by sad69
    Code:
    var childNum = 10;
    var tempCenter = document.createElement("div");
    tempCenter.setAttribute("className", "center");
    var tempText = document.createTextElement("Test " + childNum);
    tempCenter.appendChild(tempText);
    Element --> Node
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by liorean
    Element --> Node
    Oops! My bad..

    Thanks liorean
    Sadiq.

  • #5
    Regular Coder
    Join Date
    Feb 2004
    Posts
    192
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is another issue I am having with my attributes. My snippet code looks something like this:

    Code:
    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?

  • #6
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't even know what the heck you're doing there!
    Code:
    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.

  • #7
    Regular Coder
    Join Date
    Feb 2004
    Posts
    192
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't think you can change that.. innerHTML or outerHTML will change everything to capitals. When you do this:
    Code:
    tempCenter = document.createElement("div");
    It creates this:
    Code:
    <DIV></DIV>
    Not sure why it really matters though..
    Code:
    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.

  • #9
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #10
    Regular Coder
    Join Date
    Feb 2004
    Posts
    192
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by brothercake; 05-21-2004 at 11:28 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #12
    Regular Coder
    Join Date
    Feb 2004
    Posts
    192
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •