DOM: Properties set before calling appendChild() are lost after call

[Robert Oschler]

I'm having a very painful time converting some Mozilla dynamic DOM code to
work with Internet Explore. For example, given this code:

--------------
selectBox=document.createElement("SELECT");
selectBox.name="theSelectBox";

optionOne=document.createElement("OPTION");
optionOne.name="option1";
optionOne.value="one";
optionOne.text="one";

selectBox.appendChild(optionOne);
--------------

This code doesn't work because the option element text property becomes
empty after I execute the appendChild() method. HOWEVER, if I put the
appendChild() call BEFORE I set the "text" property all is well.

This also seems to be the case for several other properties too.

The problem is, a lot of my code was structured around having several child
nodes pre-created, and THEN adding them to the container/parent node. This
worked fine in Mozilla, but because of the above mentioned "quirk", fails
miserably with IE. Annoyingly enough, with IE you HAVE to set the type
before calling appendChild() or IE will throw an error when you try to set
it after the appendChild() call (the type property is write-once only and
apparently calling appendChild() affects the "type" property in some way).

Before I rewrite a whole bunch of code, is there a workaround or a known
technique for dealing with this?

If I am wrong about this, then tell me why I lose the values of certain
properties after I call appendChild()?

Thanks

[Janwillem Borleffs]

Robert Oschler wrote:

optionOne.value="one";
optionOne.text="one";

optionOne.setAttribute('value','one');
textNode = document.createTextNode('one');
opionOne.appendChild(textNode);
selectBox.appendChild(optionOne);
If I am wrong about this, then tell me why I lose the values of
certain properties after I call appendChild()?

Restrict yourself to use DOM setters only and you will be fine.
JW

[Peroli]

hi,
Robert Oschler wrote:

I'm having a very painful time converting some Mozilla dynamic DOM code to
work with Internet Explore. For example, given this code:

--------------
selectBox=document.createElement("SELECT");
selectBox.name="theSelectBox";

optionOne=document.createElement("OPTION");
optionOne.name="option1";
optionOne.value="one";
optionOne.text="one";
This will work only if "optionOne" is in the HTML DOM. Since you
haven't added it to the DOM yet, you can set its attribute only with
"setAttribute()" method of DOM.


selectBox.appendChild(optionOne);
--------------

This code doesn't work because the option element text property becomes
empty after I execute the appendChild() method. HOWEVER, if I put the
appendChild() call BEFORE I set the "text" property all is well.

See, that answers them all.
This also seems to be the case for several other properties too.
Yes. Right.

The problem is, a lot of my code was structured around having several child
nodes pre-created, and THEN adding them to the container/parent node. This
worked fine in Mozilla, but because of the above mentioned "quirk", fails
miserably with IE. Annoyingly enough, with IE you HAVE to set the type
before calling appendChild() or IE will throw an error when you try to set
it after the appendChild() call (the type property is write-once only and
apparently calling appendChild() affects the "type" property in some way).

Always follow W3C DOM Convention in accessing DOM Elements. You will be
fine.
Before I rewrite a whole bunch of code, is there a workaround or a known
technique for dealing with this?

If I am wrong about this, then tell me why I lose the values of certain
properties after I call appendChild()?

Thanks

- Peroli Sivaprakasam

[Robert Oschler]

"Peroli" <pe****@gmail.com> wrote in message
news:11**********************@g43g2000cwa.googlegr oups.com...

hi,

This will work only if "optionOne" is in the HTML DOM. Since you
haven't added it to the DOM yet, you can set its attribute only with
"setAttribute()" method of DOM.

selectBox.appendChild(optionOne);
--------------

See, that answers them all.

This also seems to be the case for several other properties too.

Yes. Right.

Always follow W3C DOM Convention in accessing DOM Elements. You will be
fine.

Peroli,

See my reply to Janwillem.

Thanks.

[Robert Oschler]

"Janwillem Borleffs" <[e-mail]> wrote in message
news:43***********************@news.euronet.nl...

Robert Oschler wrote:

optionOne.value="one";
optionOne.text="one";

optionOne.setAttribute('value','one');
textNode = document.createTextNode('one');
opionOne.appendChild(textNode);
selectBox.appendChild(optionOne);

If I am wrong about this, then tell me why I lose the values of
certain properties after I call appendChild()?

Restrict yourself to use DOM setters only and you will be fine.
JW

Janwillem,

Just tried that, no luck. The "text" property of new "OPTION" nodes added
to the selection box, even using newOption.setAttribute("text", someValue),
still get wiped after the appendChild() call. If I move the appendChild()
call before the (now) newOption.setAttribute() calls, it works fine.

Thanks.

[Janwillem Borleffs]

Robert Oschler wrote:

Just tried that, no luck. The "text" property of new "OPTION" nodes
added to the selection box, even using newOption.setAttribute("text",
someValue), still get wiped after the appendChild() call. If I move
the appendChild() call before the (now) newOption.setAttribute()
calls, it works fine.

As Peroli already pointed out, the text property doesn't exist on element
creation time. The call setAttribute("text", someValue) just creates a text
attribute, while you are simply dealing with the text node which contains
the displayed text for the property.

That's why you will have to use document.createTextNode to create the text
node and append it to the option element as I pointed out before.
JW

[Michael Winter]

On 03/09/2005 21:02, Janwillem Borleffs wrote:

As Peroli already pointed out, the text property doesn't exist on element
creation time.
That reasoning is somewhat dubious as this behaviour is specific to use
of the text property and the appendChild method in IE. That is, if you
add the OPTION element using the add method, it is added correctly.
Moreover, other browsers do not have issues with the former approach.
The call setAttribute("text", someValue) just creates a text
attribute, [...]
Which is why using the setAttribute method is not appropriate; not all
shortcut properties are directly related to element attributes, and this
is a very clear example.
That's why you will have to use document.createTextNode to create the text
node and append it to the option element as I pointed out before.

For the record, I'm not disagreeing with this approach as they are
equivalent in the end (a text node child will be created with the value
assigned to the text property). What I am doing is correcting what you
are stating as the problem: inconsistent behaviour in IE using the
appendChild child method.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

[RobG]

Robert Oschler wrote:

"Janwillem Borleffs" <[e-mail]> wrote in message
news:43***********************@news.euronet.nl...

Robert Oschler wrote:

optionOne.value="one";
optionOne.text="one";

optionOne.setAttribute('value','one');
textNode = document.createTextNode('one');
opionOne.appendChild(textNode);
selectBox.appendChild(optionOne);

You could do it all in one go using new Option which has the following
format:

var opt = new Option( text, value, defaultSelected, currentSelected);

In your case, you'd use:

var opt = new Option( 'one', 'one', false, false );
selectBox.appendChild( opt );

It's not W3C DOM but it works consistently on a wide variety of browsers
(i.e. it works in IE).

More stuff is here:

<URL:http://www.quirksmode.org/js/options.html>
[...]

--
Rob