Writing text to <DIV>

Discussion in 'Javascript' started by Primal-oooze, Mar 29, 2006.

  1. Primal-oooze

    Primal-oooze Guest

    In most newer browsers, would the following methods successfully write to the <div>s below?

    ------
    <script>
    document.all.div1.innerText = "Some random text.";

    document.all.div2.innerHTML = "More random text.";
    </script>

    <div id="div1">
    </div>

    <div id="div2">
    </div>
    ------

    If not, is there a more universal method?
    Primal-oooze, Mar 29, 2006
    #1
    1. Advertising

  2. Primal-oooze

    web.dev Guest

    Primal-oooze wrote:
    > In most newer browsers, would the following methods successfully write to the <div>s below?
    >
    > ------
    > <script>


    The type attribute is required:

    <script type = "text/javascript">

    > document.all.div1.innerText = "Some random text.";
    > document.all.div2.innerHTML = "More random text.";


    This would not work in all browsers because 'document.all' is
    specifically for Internet Explorer.

    > If not, is there a more universal method?


    If you want to just append text, try the following:

    html:

    <div id = "div1"></div>
    <div id = "div2"></div>

    javascript:

    var myDiv1 = document.getElementById("div1");
    var myDiv2 = document.getElementById("div2");

    myDiv1.appendChild(document.createTextNode("Some random text."));
    myDiv2.appendChild(document.createTextNode("More random text."));

    Don't forget to do feature detection.
    web.dev, Mar 29, 2006
    #2
    1. Advertising

  3. Primal-oooze

    Randy Webb Guest

    Primal-oooze said the following on 3/29/2006 2:46 PM:
    > In most newer browsers, would the following methods successfully write to the <div>s below?


    No.

    > ------
    > <script>
    > document.all.div1.innerText = "Some random text.";
    >
    > document.all.div2.innerHTML = "More random text.";
    > </script>
    >
    > <div id="div1">
    > </div>
    >
    > <div id="div2">
    > </div>
    > ------
    >
    > If not, is there a more universal method?


    DynWrite in this groups FAQ.

    <URL: http://jibbering.com/faq/#FAQ4_15>

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Mar 29, 2006
    #3
  4. Primal-oooze wrote:
    > In most newer browsers, would the following methods successfully write to the <div>s below?
    >
    > ------
    > <script>
    > document.all.div1.innerText = "Some random text.";
    >
    > document.all.div2.innerHTML = "More random text.";
    > </script>
    >
    > <div id="div1">
    > </div>
    >
    > <div id="div2">
    > </div>
    > ------
    >
    > If not, is there a more universal method?


    Greetings,

    I ran into a need to update page objects pretty frequently so I wrote a
    javascript function that works with all newer browsers and platforms
    (that I have tested anyway). You are free to use it. I have commented
    all the options that are available in the JS file.

    Here is a link to the code with examples on how to use the function in
    the comments:

    http://www.manifestinteractive.com/usenet/manifestElementControl.js

    Here is a sample HTML file with some DIV's you can control using links
    I have added:

    http://www.manifestinteractive.com/usenet/manifestElementControl.html

    Hope this helps those who need it, and feel free to use any of the code
    you want. I use it all the time [ cause I wrote it :) ]

    - Peter Schmalfeldt
    Manifest Interactive, Mar 29, 2006
    #4
  5. web.dev wrote:

    > Primal-oooze wrote:
    >> In most newer browsers, would the following methods successfully write to

    ^^^^
    >> the <div>s below?
    >>[...]
    >> document.all.div1.innerText = "Some random text.";
    >> document.all.div2.innerHTML = "More random text.";

    >
    > This would not work in all browsers


    True. However, that was not what was asked.

    > because 'document.all' is specifically for Internet Explorer.


    False. Opera always(?) implemented it, and newer Geckos implement it,
    too (although it cannot be detected by feature tests in most versions).
    So there is reason to believe that it works in "most newer browsers".

    However, using this referencing is generally recommended against, because
    both document.all and innerText/innerHTML are proprietary. Using methods
    introduced with W3C DOM Level 2 Core instead is the interoperable, and I
    dare say future-proof, approach.


    PointedEars
    Thomas 'PointedEars' Lahn, Mar 30, 2006
    #5
  6. Primal-oooze

    Primal-oooze Guest

    >
    > If not, is there a more universal method?
    >


    Thanks everyone,

    I googled your suggestions and have a better idea now.

    I haven't worked on this stuff for a few years and I hoped by now there would be some cross browser methods.

    Oh well some things never change.

    Thanks
    Primal-oooze, Mar 30, 2006
    #6
  7. Primal-oooze

    RobG Guest

    Thomas 'PointedEars' Lahn said on 30/03/2006 9:09 AM AEST:
    > web.dev wrote:

    [...]
    >
    >>because 'document.all' is specifically for Internet Explorer.

    >
    >
    > False. Opera always(?) implemented it, and newer Geckos implement it,
    > too (although it cannot be detected by feature tests in most versions).
    > So there is reason to believe that it works in "most newer browsers".


    It 'works' in Gecko browsers only in certain circumstances:

    1. If no DOCTYPE is specified.

    2. If an HTML 4 Transitional or Frameset DOCTYPE is specified
    *and* no link to the DTD is provided

    e.g.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    It will not work in Gecko browsers if:

    1. An HTML 4 Transitional or Frameset DOCTYPE is used and a
    link to the loose or frameset DTD respectively is provided.

    e.g.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    2. A strict DOCTYPE is used, regardless of whether a DTD link
    is provided

    3. An XHTML DOCTYPE is used, regardless of whether a DTD link
    is provided


    There may be other conditions under which it will/wont work.



    --
    Rob
    RobG, Mar 30, 2006
    #7
  8. Primal-oooze

    RobG Guest

    Primal-oooze said on 30/03/2006 3:24 PM AEST:
    >>If not, is there a more universal method?

    >
    > Thanks everyone,
    >
    > I googled your suggestions and have a better idea now.
    >
    > I haven't worked on this stuff for a few years and I hoped by now there would be some cross browser methods.


    There are.


    > Oh well some things never change.


    They have. Use W3C DOM methods, add support for version 4 browsers if
    required.

    In regard to the code you posted, it won't work because you are
    attempting to access and modify elements before they are created. I
    guess it was just an example and what you really wanted to know was how
    to go about modifying the DOM.

    In regard to the methods/properties in your posted code:

    document.all is a Microsoft proprietary method that is not well
    supported outside IE. It has been replaced almost completely by the DOM
    compliant document.getElementById(), which works in IE 5 and later and
    virtually all browsers since about 1998.


    innerText is a Microsoft proprietary property, it is not well supported
    by other browsers. The DOM compliant alternative is textContent.
    Alternative functions that you may like to use (or not) are posted here:

    <URL:http://groups.google.co.uk/group/comp.lang.javascript/browse_frm/thread/a57e882da273df0/23eaaa3cc6e036e9?q=DIV+and+InnerHTML+differences+IE%2FFirefox&rnum=1#23eaaa3cc6e036e9>

    But generally there is little reason to use it when a text node will do
    the job just as well.


    innerHTML is a Microsoft proprietary property that has been widely
    copied by other browsers. There is Mozilla extension (the range
    interface) that provides the same functionality, but it's generally
    simpler to just use innerHTML.



    --
    Rob
    RobG, Mar 30, 2006
    #8
  9. Thomas 'PointedEars' Lahn wrote:
    > web.dev wrote:

    <snip>
    >> because 'document.all' is specifically for Internet Explorer.

    >
    > False. Opera always(?) implemented it, ...

    <snip>

    I don't know about always but - document.all - was available in Opera
    versions form 5 onwards at least, to my certain knowledge. However,
    Operas 5 - 6 had an unusual attitude towards proving this feature as it
    was only available (along with some other IE originating features such
    as a - children - collection on Element nodes) if the browser was set to
    identify itself as IE. If you set the browser to identify itself as, for
    example, itself or Netscape then the DOM did not expose these features.
    They gave up this DOM switching with version 7; it probably turned out
    to be more effort than it was worth.

    Richard.
    Richard Cornford, Apr 7, 2006
    #9
    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. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    745
  2. M Wells
    Replies:
    0
    Views:
    138
    M Wells
    Oct 6, 2004
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    186
    David Dorward
    Jun 1, 2005
  4. mscir
    Replies:
    3
    Views:
    307
    Martin Honnen
    Jun 26, 2005
  5. visu
    Replies:
    4
    Views:
    293
Loading...

Share This Page