Changing text between <div>'s

[Ton den Hartog]

Stupid basic question but I find it horribly imposible to find the answer
elsewhere... :-(

I want to have a piece of text in my HTML page and want to be able to change
it in a Javascript function that is called from a button. I think I can use
a

<div id="t"></div>

for this ? Something like

document.t.valu e="Hello"

should change it into

<div id="t">Hello</div>

I am getting fucking mad at finding these simple things.... Is there a good
intro somewhere ? My thick Oreilly JS book is just too busy with the
complicated stuff somehow :-((

Ton

--
--
Computer museum tonh: http://www.tonh.net/museum - 10.000 visitors !!
GGGallery website generator: http://www.tonh.net/gggallery
Vrij Kunst Centrum : http://www.meesterschap.nu

[Ton den Hartog]

Re: Changing text between &lt;div&gt;' s

Ok, already solved it. Remembered I asked this once before....

document.getEle mentById('t').f irstChild.nodeV alue="Hello";

Unbelievable how complex.... Will look for the model of this....

Thanks,

Ton

--
--
Computer museum tonh: http://www.tonh.net/museum - 10.000 visitors !!
GGGallery website generator: http://www.tonh.net/gggallery
Vrij Kunst Centrum : http://www.meesterschap.nu


"Ton den Hartog" <ton.den.hartog .removespam@ton h.net> wrote in message
news:3fec0eb5$0 $321$e4fe514c@n ews.xs4all.nl.. .[color=blue]
> Stupid basic question but I find it horribly imposible to find the answer
> elsewhere... :-(
>
> I want to have a piece of text in my HTML page and want to be able to[/color]
change[color=blue]
> it in a Javascript function that is called from a button. I think I can[/color]
use[color=blue]
> a
>
> <div id="t"></div>
>
> for this ? Something like
>
> document.t.valu e="Hello"
>
> should change it into
>
> <div id="t">Hello</div>
>
> I am getting fucking mad at finding these simple things.... Is there a[/color]
good[color=blue]
> intro somewhere ? My thick Oreilly JS book is just too busy with the
> complicated stuff somehow :-((
>
> Ton
>
> --
> --
> Computer museum tonh: http://www.tonh.net/museum - 10.000 visitors !!
> GGGallery website generator: http://www.tonh.net/gggallery
> Vrij Kunst Centrum : http://www.meesterschap.nu
>
>
>[/color]

[Ton den Hartog]

Re: Changing text between &lt;div&gt;' s

Why is this so complex ??? Why does DOM not have an easy model for this ????

Ton

--
--
Computer museum tonh: http://www.tonh.net/museum - 10.000 visitors !!
GGGallery website generator: http://www.tonh.net/gggallery
Vrij Kunst Centrum : http://www.meesterschap.nu


"Ton den Hartog" <ton.den.hartog .removespam@ton h.net> wrote in message
news:3fec1926$0 $327$e4fe514c@n ews.xs4all.nl.. .[color=blue]
> Ok, already solved it. Remembered I asked this once before....
>
> document.getEle mentById('t').f irstChild.nodeV alue="Hello";
>
> Unbelievable how complex.... Will look for the model of this....
>
> Thanks,
>
> Ton
>
> --
> --
> Computer museum tonh: http://www.tonh.net/museum - 10.000 visitors !!
> GGGallery website generator: http://www.tonh.net/gggallery
> Vrij Kunst Centrum : http://www.meesterschap.nu
>
>
> "Ton den Hartog" <ton.den.hartog .removespam@ton h.net> wrote in message
> news:3fec0eb5$0 $321$e4fe514c@n ews.xs4all.nl.. .[color=green]
> > Stupid basic question but I find it horribly imposible to find the[/color][/color]
answer[color=blue][color=green]
> > elsewhere... :-(
> >
> > I want to have a piece of text in my HTML page and want to be able to[/color]
> change[color=green]
> > it in a Javascript function that is called from a button. I think I can[/color]
> use[color=green]
> > a
> >
> > <div id="t"></div>
> >
> > for this ? Something like
> >
> > document.t.valu e="Hello"
> >
> > should change it into
> >
> > <div id="t">Hello</div>
> >
> > I am getting fucking mad at finding these simple things.... Is there a[/color]
> good[color=green]
> > intro somewhere ? My thick Oreilly JS book is just too busy with the
> > complicated stuff somehow :-((
> >
> > Ton
> >
> > --
> > --
> > Computer museum tonh: http://www.tonh.net/museum - 10.000 visitors !!
> > GGGallery website generator: http://www.tonh.net/gggallery
> > Vrij Kunst Centrum : http://www.meesterschap.nu
> >
> >
> >[/color]
>
>[/color]

[Jim Ley]

Re: Changing text between &lt;div&gt;' s

On Fri, 26 Dec 2003 12:19:38 +0100, "Ton den Hartog"
<ton.den.hartog .removespam@ton h.net> wrote:
[color=blue]
>Why is this so complex ??? Why does DOM not have an
>easy model for this ????[/color]

DOM is not designed to be simple it's designed to be consistent across
programming languages, I have no idea why that was a design aim, but
it is, this means what can be done simply in typeless scripting
language doesn't get into the language if it would make the java or
LISP binding more complicated.

It's often best to use the proprietary methods, as these generally are
optimised for scripting, and only fallback to DOM if they don't work.

Jim.
--
comp.lang.javas cript FAQ - http://jibbering.com/faq/

[Ton den Hartog]

Re: Changing text between &lt;div&gt;' s

> It's often best to use the proprietary methods

Which is in this case ?

Thanks,

Ton



, as these generally are[color=blue]
> optimised for scripting, and only fallback to DOM if they don't work.
>
> Jim.
> --
> comp.lang.javas cript FAQ - http://jibbering.com/faq/
>[/color]

[Fabian]

Re: Changing text between &lt;div&gt;' s

Ton den Hartog hu kiteb:
[color=blue][color=green]
>> It's often best to use the proprietary methods[/color]
>
> Which is in this case ?[/color]

document.t.inne rhtml

You'll want to double check the case - its sensitive iirc.


--
--
Fabian
Visit my website often and for long periods!

http://www.lajzar.co.uk

[Lasse Reichstein Nielsen]

Re: Changing text between &lt;div&gt;' s

"Fabian" <lajzar@hotmail .com> writes:
[color=blue]
> Ton den Hartog hu kiteb:
>[color=green][color=darkred]
>>> It's often best to use the proprietary methods[/color]
>>
>> Which is in this case ?[/color]
>
> document.t.inne rhtml[/color]

That would fail in all browsers :)

Even if you write it "innerHTML" , it would still fail in IE and probably
also other browsers.

To get the element to change, use
document.getEle mentById("t")
That is the method that works in the most current browsers.
If you need to support IE 4 (or possibly WebTV), you can
use a fallback to the document.all collection:
---
var elem;
if (document.getEl ementById) {
elem = document.getEle mentById("t");
} else if (document.all) { // IE 4 and a few other
elem = document.all["t"];
} // else (e.g., Netscape 4) panic.
---
Just writing "document.t " assumes that the named element is made a
property, with the same name, of the document element. That is not
the case in, e.g., Internet Explorer. (Using just "t.innerHTM L"
would break in Mozilla/Netscape for similar reasons - just use
getElementById! )

You can then change the content with the proprietary (but widely
implemented) innerHTML property:

var elem = document.getEle mentById("t");
elem.innerHTML = "some <em>HTML<\/em> content";

If you want to check for the existence of the innerHTML property
before using it, you have two choices:
Simple:

var elem = document.getEle mentById("t");
if (elem.innerHTML ) { ... }

That has the disadvantage of creating a very large string if elem has
a lot of content already. That is inefficient.

Smart, but dangerous:
var elem = document.getEle mentById("t");
if ("innerHTML" in elem) { ... }

That has the disadvantage of not working in older browsers. I am not
sure any of those support "innerHTML" , but that kind of ruins the
idea of testing.

The syntax ("name" in obj) was introduced in JScript 1.0 (according to
MSDN, so IE it should work in any version of IE), and JavaScript 1.4
(Netscape 6 and later, not Netscape 4). The very bad thing about it
is, that browsers that don't support it, treats it as a syntax error.
That means that it breaks the entire script block it is in.
[color=blue]
> You'll want to double check the case - its sensitive iirc.[/color]

Yes, Javascript is case sensitive.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[DU]

Re: Changing text between &lt;div&gt;' s

Jim Ley wrote:[color=blue]
> On Fri, 26 Dec 2003 12:19:38 +0100, "Ton den Hartog"
> <ton.den.hartog .removespam@ton h.net> wrote:
>
>[color=green]
>>Why is this so complex ??? Why does DOM not have an
>>easy model for this ????[/color]
>
>
> DOM is not designed to be simple it's designed to be consistent across
> programming languages, I have no idea why that was a design aim, but
> it is, this means what can be done simply in typeless scripting
> language doesn't get into the language if it would make the java or
> LISP binding more complicated.
>
> It's often best to use the proprietary methods,[/color]

I disagree. CharacterData attributes and methods are widely and well
supported in recent browsers. If we are talking about text nodes only
(CharacterData objects), then use of proprietary methods is not
recommendable. If we are talking about element nodes, then this is a
different issue.

Unless someone can prove me wrong, all DOM2 CharacterData attributes and
methods are supported 100% by the following browsers:
Safari 1.x
Konqueror 3.x
MSIE 6 for Windows
Mozilla-based browsers (17 browsers) based on Mozilla 1.x
Opera 7.x

So why use anything else than CharacterData attributes and methods?

DU

as these generally are[color=blue]
> optimised for scripting, and only fallback to DOM if they don't work.
>
> Jim.[/color]

[DU]

Re: Changing text between &lt;div&gt;' s

Jim Ley wrote:
[color=blue]
> On Fri, 26 Dec 2003 12:19:38 +0100, "Ton den Hartog"
> <ton.den.hartog .removespam@ton h.net> wrote:
>
>[color=green]
>>Why is this so complex ??? Why does DOM not have an
>>easy model for this ????[/color]
>
>
> DOM is not designed to be simple it's designed to be consistent across
> programming languages, I have no idea why that was a design aim, but
> it is, this means what can be done simply in typeless scripting
> language doesn't get into the language if it would make the java or
> LISP binding more complicated.
>
> It's often best to use the proprietary methods, as these generally are
> optimised for scripting, and only fallback to DOM if they don't work.
>
> Jim.[/color]


In my own tests, MSIE 6 for windows, Mozilla 1.x, NS 7.1 all render text
node changes 300% faster if you change the text node with W3C DOM
nodeValue than by resorting to innerHTML. This percentage is as high/big
as 2000% on some Opera 7.x versions.
The performance gain will be greater for long text nodes and slow cpu.
The performance gain will be smaller for short text nodes and fast cpu.

Performance comparison between innerHTML attribute and DOM's nodeValue
when modifying the text data of a node of type TEXT_NODE:

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/innerHTMLvsNodeValue.html

DOM level 2 CharacterData Interface tests

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/DOM2CharacterData.html

DU

[DU]

Re: Changing text between &lt;div&gt;' s

Ton den Hartog wrote:
[color=blue]
> Ok, already solved it. Remembered I asked this once before....
>
> document.getEle mentById('t').f irstChild.nodeV alue="Hello";
>
> Unbelievable how complex.... Will look for the model of this....
>
> Thanks,
>
> Ton
>[/color]

Your original code was itself part of the problem. When you write

<div id="t"></div>

then there is no firstChild node in such code. No childNodes either.
MSIE 6 for Windows, Mozilla 1.7alpha, Opera 7.50 PR1 all return null
when querying for document.getEle mentById("t").f irstChild. Just by
inserting a single word or blank space in that div would have made a
difference though.

Further reading:
Nodes:

http://www.quirksmode.org/dom/intro.html#nodes

The Document Object Model (DOM):
The Simple Document's Diagram

http://webreference.com/js/column40/drawsimple.html

(Reading the entire article is best)

DU

[Jim Ley]

Re: Changing text between &lt;div&gt;' s

On Fri, 26 Dec 2003 12:59:32 -0500, DU <drunclear@hotW IPETHISmail.com >
wrote:
[color=blue]
>Performance comparison between innerHTML attribute and DOM's nodeValue
>when modifying the text data of a node of type TEXT_NODE:
>http://www10.brinkster.com/doctorunc...NodeValue.html[/color]

You're assuming that speed matters.

You're also not doing any of the error trapping, to trap the
childNodes one you need to test for the existence of childNodes and of
childNodes[0], which you do not do this will further degrade
performance.

However in specific examples W3 DOM might be faster at the expense of
complexity and it's certainly worth using them with appropriate
checks, the problem is for the novice scripter understanding DOM and
ensuring it's safe isn't so easy, hence the OP's question.

Jim.
--
comp.lang.javas cript FAQ - http://jibbering.com/faq/

[DU]

Re: Changing text between &lt;div&gt;' s

Jim Ley wrote:[color=blue]
> On Fri, 26 Dec 2003 12:59:32 -0500, DU <drunclear@hotW IPETHISmail.com >
> wrote:
>
>[color=green]
>>Performance comparison between innerHTML attribute and DOM's nodeValue
>>when modifying the text data of a node of type TEXT_NODE:
>>http://www10.brinkster.com/doctorunc...NodeValue.html[/color]
>
>
> You're assuming that speed matters.
>[/color]

I'm just noticing that speed is a little bonus on top of
interoperabilit y and compliance to standards.
If you know what you're doing, then you no longer need to resort to
innerHTML (and innerText, etc...) anymore: one code fits all recent
browsers. It's not just modifying nodeValue but all the other
CharacterData methods as well (inserting, replacing, deleting,
appending) which are now very well supported by recent browser versions.
[color=blue]
> You're also not doing any of the error trapping, to trap the
> childNodes one you need to test for the existence of childNodes and of
> childNodes[0], which you do not do[/color]


Fair enough. I've updated the function with:
if(arrAllThePar g[PargIterator].childNodes[0] &&
arrAllTheParg[PargIterator].childNodes[0].nodeType == 3)
in the for loop.

this will further degrade[color=blue]
> performance.
>[/color]

Not much degradation. Maybe 50msec to 100msec on my PC. It's still
considerably faster to use DOM nodeValue instead of innerHTML.
I changed the "300%" to "200%".
[color=blue]
> However in specific examples W3 DOM might be faster at the expense of
> complexity and it's certainly worth using them with appropriate
> checks, the problem is for the novice scripter understanding DOM and
> ensuring it's safe isn't so easy, hence the OP's question.
>
> Jim.[/color]

I would say that a majority of text changes in usual pages involve only
a few words, or a line, maybe a 2 line paragraph at the most (not 15KB
of text like in my testpage). In which case, using innerHTML or
firstChild.node Value or innerText (if applicable) won't make a lot of
difference in speed, performance.

DU

[Thomas 'PointedEars' Lahn]

Re: Changing text between &lt;div&gt;' s

Jim Ley wrote:
[color=blue]
> It's often best to use the proprietary methods, as these generally are
> optimised for scripting, and only fallback to DOM if they don't work.[/color]

This approach is utter nonsense as it makes scripts incompatible by
default, and we do not have to talk about their perspective to work
in the foreseeable future. Standards have been established to be
followed, not to be avoided. That is not a matter of whether you
like them or not, but a matter of getting dependent on the moods of
one particular vendor and his products, or not.


PointedEars

[Jim Ley]

Re: Changing text between &lt;div&gt;' s

On Sat, 27 Dec 2003 03:09:31 +0100, Thomas 'PointedEars' Lahn
<PointedEars@we b.de> wrote:
[color=blue]
>Jim Ley wrote:
>[color=green]
>> It's often best to use the proprietary methods, as these generally are
>> optimised for scripting, and only fallback to DOM if they don't work.[/color]
>
>This approach is utter nonsense as it makes scripts incompatible by
>default,[/color]

incompatible with what by default, it's ludicrous to talk about
incompatibility without talking about what it it incompatible with.

There's no single solution that reaches 100% every solution is
incompatible with some user agents.
[color=blue]
>and we do not have to talk about their perspective to work
>in the foreseeable future.[/color]

Most pages are written for the foreseeable future, in any case,
there's no new browsers on the horizon in the HTML world, and those
that exist and are being worked on are all implementing the same old
proprietary scripts.

The future holds much more chances of X-Smiles or DENG becoming more
important, and no HTML pages are going to be relevant, let alone their
scripting.
[color=blue]
> Standards have been established to be
>followed, not to be avoided.[/color]

We've already established that some proprietary is ok to be used
(document, setTimeout etc. being the most relevant) if some is okay,
then you have to make explicit what the objective criteria you're
using to choose which are allowed and which aren't.

Jim.
--
comp.lang.javas cript FAQ - http://jibbering.com/faq/

[Thomas 'PointedEars' Lahn]

Re: Changing text between &lt;div&gt;' s

Jim Ley wrote:
[color=blue]
> On Sat, 27 Dec 2003 03:09:31 +0100, Thomas 'PointedEars' Lahn[color=green]
>>Jim Ley wrote:[color=darkred]
>>> It's often best to use the proprietary methods, as these generally are
>>> optimised for scripting, and only fallback to DOM if they don't work.[/color]
>>
>>This approach is utter nonsense as it makes scripts incompatible by
>>default,[/color]
>
> incompatible with what by default, it's ludicrous to talk about
> incompatibility without talking about what it it incompatible with.[/color]

Incompatibility with other user agents, previous and future versions
of the same UA, versions of the same UA running on other platforms,
and other document types and thus other DOMs supported by the same UA.
[color=blue]
> There's no single solution that reaches 100% every solution is
> incompatible with some user agents.[/color]

True, nevertheless proprietary code is error-prone code
and should be avoided where possible, not been looked for.


PointedEars