Writing text to <DIV>

[Primal-oooze]

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>

 

[web.dev]

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

The type attribute is required:

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.

 

[Randy Webb]

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>

DynWrite in this groups FAQ.

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

 

[Manifest Interactive]

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>

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

 

[Thomas 'PointedEars' Lahn]

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

 

[Primal-oooze]

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

 

[RobG]

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.

 

[RobG]

Primal-oooze said on 30/03/2006 3:24 PM AEST:

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/co...ifferences+IE/Firefox&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.

 

[Richard Cornford]

web.dev wrote:

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.