xhtml, innerHtml, appendChild, and innerHTML. what is the exact proper way to do this with DOM

Discussion in 'Javascript' started by sonic, Jul 10, 2006.

  1. sonic

    sonic Guest

    Ok,
    i am sure everyone is sick of hearing about this. but i've checked
    about 10 different posts/sites about this issue, and they all say "use
    DOM" but i think there is more to be said. Perhaps I am a total newbie
    but the answer was not immediately obvious to me here.
    so.. problem:
    declaring doctype as xhtml will prevent myDiv.innerHtml=val from
    working.

    suggested solution:
    use DOM.
    var myNewDiv = document.createElement( 'div' );
    myDiv.appendChild( myNewDiv );
    now we have to set that new div's value somehow right? of course
    myNewDiv.innerHtml will not work. so using DOM puts us in the same
    exact spot. unless i went about this the wrong way.. i realize that
    using dom to appen a input text will work because .value property will
    be set no problem, but how do we set just a text value?

    and how come
    myDiv.innerHTML = val // all caps HTML
    still works?
     
    sonic, Jul 10, 2006
    #1
    1. Advertising

  2. sonic

    Randy Webb Guest

    Re: xhtml, innerHtml, appendChild, and innerHTML. what is the exactproper way to do this with DOM

    sonic said the following on 7/10/2006 2:09 PM:
    > Ok,
    > i am sure everyone is sick of hearing about this. but i've checked
    > about 10 different posts/sites about this issue, and they all say "use
    > DOM" but i think there is more to be said. Perhaps I am a total newbie
    > but the answer was not immediately obvious to me here.
    > so.. problem:
    > declaring doctype as xhtml will prevent myDiv.innerHtml=val from
    > working.


    Only in browsers that support xHTML (IE doesn't).

    > suggested solution:
    > use DOM.
    > var myNewDiv = document.createElement( 'div' );
    > myDiv.appendChild( myNewDiv );


    Give your div an ID:

    myDiv.id="test";


    > now we have to set that new div's value somehow right? of course
    > myNewDiv.innerHtml will not work. so using DOM puts us in the same
    > exact spot.


    var el = document.getElementById("test");
    //remove all childNodes
    while (el.firstChild) {
    el.removeChild(el.firstChild);
    }
    //insert new Text
    el.appendChild(document.createTextNode(theTextToAdd));
    }

    > unless i went about this the wrong way.. i realize that
    > using dom to appen a input text will work because .value property will
    > be set no problem, but how do we set just a text value?


    See above.

    > and how come
    > myDiv.innerHTML = val // all caps HTML
    > still works?


    In which browser?

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    Randy Webb, Jul 10, 2006
    #2
    1. Advertising

  3. sonic

    sonic Guest

    thanks for quick response Randy.
    1. the ID was not the issue. I already had a reference to my control. I
    just didn't know about the document.createTextNode method. thank you
    for that.

    2. innerHTML works for me in firefox 1.5.0.4 and MSIE
    6.0.2900.2180.xpsp_sp2_gdr.......
    my doc declaration is:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Randy Webb wrote:
    > sonic said the following on 7/10/2006 2:09 PM:
    > > Ok,
    > > i am sure everyone is sick of hearing about this. but i've checked
    > > about 10 different posts/sites about this issue, and they all say "use
    > > DOM" but i think there is more to be said. Perhaps I am a total newbie
    > > but the answer was not immediately obvious to me here.
    > > so.. problem:
    > > declaring doctype as xhtml will prevent myDiv.innerHtml=val from
    > > working.

    >
    > Only in browsers that support xHTML (IE doesn't).
    >
    > > suggested solution:
    > > use DOM.
    > > var myNewDiv = document.createElement( 'div' );
    > > myDiv.appendChild( myNewDiv );

    >
    > Give your div an ID:
    >
    > myDiv.id="test";
    >
    >
    > > now we have to set that new div's value somehow right? of course
    > > myNewDiv.innerHtml will not work. so using DOM puts us in the same
    > > exact spot.

    >
    > var el = document.getElementById("test");
    > //remove all childNodes
    > while (el.firstChild) {
    > el.removeChild(el.firstChild);
    > }
    > //insert new Text
    > el.appendChild(document.createTextNode(theTextToAdd));
    > }
    >
    > > unless i went about this the wrong way.. i realize that
    > > using dom to appen a input text will work because .value property will
    > > be set no problem, but how do we set just a text value?

    >
    > See above.
    >
    > > and how come
    > > myDiv.innerHTML = val // all caps HTML
    > > still works?

    >
    > In which browser?
    >
    > --
    > Randy
    > comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    > Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
    > Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    sonic, Jul 11, 2006
    #3
  4. sonic

    RobG Guest

    sonic wrote:
    > thanks for quick response Randy.


    What response? Why is top-posting becoming common here? Please
    interleave replies with trimmed quotes from whatever you are replying
    to. Now the conversation is completely out of sequence...

    [...]

    > Randy Webb wrote:
    > > sonic said the following on 7/10/2006 2:09 PM:
    > > > Ok,
    > > > i am sure everyone is sick of hearing about this. but i've checked
    > > > about 10 different posts/sites about this issue, and they all say "use
    > > > DOM" but i think there is more to be said. Perhaps I am a total newbie
    > > > but the answer was not immediately obvious to me here.
    > > > so.. problem:
    > > > declaring doctype as xhtml will prevent myDiv.innerHtml=val from
    > > > working.


    It will fail using that capitalisation (perhaps you've not copied
    actual code), but otherwise, why should it fail just because you are
    using XHTML[1]? There is no public specification to say where, when or
    how innerHTML should work, so test it widely before use.

    The general idea is that innerHTML should only be used for simple
    things - it is really handy to completely replace the content of an
    element with a bit of text with minimal markup. It is also common to
    use it with AJAX where large chunks of documents are returned for
    insertion into a document, but I that doesn't make it good.

    There are some big differences in implementations between browsers,
    there is no published standard for it and it isn't (and likely never
    will be) part of a W3C standard.


    > > Only in browsers that support xHTML (IE doesn't).


    Even using XHTML strict, Firefox allows the use of innerHTML without
    complaint. I'd expect it to fail with XML, not XHTML. Afterall, XHTML
    (1.0) is just HTML written as XML. 1.1 is somewhat different, but even
    then innerHTML still works in Firefox (and IE).

    [...]

    > > > and how come
    > > > myDiv.innerHTML = val // all caps HTML
    > > > still works?

    > >
    > > In which browser?


    IE and Firefox 1.5.


    1. Whether it is 'better' to use XHTML rather than HTML has been argued
    long and hard in many forums. The concensus is that unless you have a
    really good reason to use XHTML and understand the ramifications, stick
    with HTML. Otherwise, there are some significant down-sides and no
    positives to XHTML.

    --
    Rob
     
    RobG, Jul 11, 2006
    #4
  5. sonic wrote:
    <snip>
    > 2. innerHTML works for me in firefox 1.5.0.4 and MSIE
    > 6.0.2900.2180.xpsp_sp2_gdr.......


    As IE does not support XHTML at all the odds are that you are actually
    employing (more or less) formally malformed HTML (resulting in the
    receiving browser creating an HTML DOM to be scripted) and so it is not
    surprising that innerHTML works.

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


    An XHTML DOCTYPE does not make a document into an XHTML document (even
    if it could not be an XHTML document without one). For web browser the
    critical factor is the HTTP content type header. If you serve a document
    as text/html then it is interpreted as a (tag soup) HTML document. Any
    resemblance that document may have to XHTML is irrelevant to the browser
    (beyond forcing the browser to do a lot of extra work error-correcting
    it back to (tag soup) HTML), though it may fool the author.

    However, if you are going to script a document as an HTML document it is
    perverse to mark it up as if it was not an HTML document.

    > Randy Webb wrote:

    <snip>

    Please do not top post to comp.lang.javascript.

    Richard.
     
    Richard Cornford, Jul 11, 2006
    #5
  6. sonic

    Randy Webb Guest

    Re: xhtml, innerHtml, appendChild, and innerHTML. what is the exactproper way to do this with DOM

    RobG said the following on 7/10/2006 10:45 PM:

    <snip>

    >>> Only in browsers that support xHTML (IE doesn't).

    >
    > Even using XHTML strict, Firefox allows the use of innerHTML without
    > complaint. I'd expect it to fail with XML, not XHTML. Afterall, XHTML
    > (1.0) is just HTML written as XML. 1.1 is somewhat different, but even
    > then innerHTML still works in Firefox (and IE).


    Not in IE. IE doesn't support xHTML so it can't possibly support
    innerHTML in xHTML. And it is even debatable whether FF is getting true
    xHTML from the OP.

    > [...]
    >
    >>>> and how come
    >>>> myDiv.innerHTML = val // all caps HTML
    >>>> still works?
    >>> In which browser?

    >
    > IE and Firefox 1.5.


    Firefox, yes. IE, no. See above.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
     
    Randy Webb, Jul 11, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Juliano Freitas

    DOM appendChild??

    Juliano Freitas, Nov 1, 2004, in forum: Python
    Replies:
    2
    Views:
    369
    Andrew Clover
    Nov 1, 2004
  2. Nicolas Van Lancker

    innerHTML / Appendchild question

    Nicolas Van Lancker, May 7, 2004, in forum: Javascript
    Replies:
    1
    Views:
    126
    Richard Cornford
    May 7, 2004
  3. Replies:
    14
    Views:
    260
    Richard Cornford
    Nov 7, 2005
  4. Derek Basch
    Replies:
    1
    Views:
    140
  5. Derek Basch
    Replies:
    0
    Views:
    179
    Derek Basch
    May 24, 2007
Loading...

Share This Page