469,326 Members | 1,450 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,326 developers. It's quick & easy.

Writing text to <DIV>

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?

Mar 29 '06 #1
8 103688

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.

Mar 29 '06 #2
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/
Mar 29 '06 #3
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/u...mentControl.js

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

http://www.manifestinteractive.com/u...ntControl.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

Mar 29 '06 #4
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
Mar 29 '06 #5
>
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


Mar 30 '06 #6
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
Mar 30 '06 #7
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+I E%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
Mar 30 '06 #8
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.
Apr 7 '06 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Jens Kristensen | last post: by
3 posts views Thread by Bill | last post: by
7 posts views Thread by howa | last post: by
28 posts views Thread by Kent Feiler | last post: by
2 posts views Thread by bgold12 | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by mdpf | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by listenups61195 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.