Dynamic content with replaceChild ()

[Joe Kelsey]

I want to create dynamic content and use replaceChild to switch out
different subtrees. I start with a span placeholder:

<span id="replaceMe"> </span>

Then I use document.getEle mentById ("replaceMe" ) to find the element
to replace. I create a subtree using standard DOM:

var table = document.create Element ("table");
table.insertRow ();
....

var replace = document.getEle mentById ("replaceMe" );
replace.parent. replaceChild (table, replace);

If I intend to replace the node several times, should I instead use:

var span = document.create Element ("span");
span.appendChil d (table);
var replace = document.getEle mentById ("replaceMe" );
span.id = replace.id;
replace.parent. replaceChild (span, replace);

Does anyone have alternative ideas for replacing portions of documents
that do not resort to using innerHTML or other abominations?

/Joe

[DU]

Re: Dynamic content with replaceChild ()

Joe Kelsey wrote:
[color=blue]
> I want to create dynamic content and use replaceChild to switch out
> different subtrees. I start with a span placeholder:
>
> <span id="replaceMe"> </span>
>
> Then I use document.getEle mentById ("replaceMe" ) to find the element
> to replace. I create a subtree using standard DOM:
>
> var table = document.create Element ("table");
> table.insertRow ();
> ....
>
> var replace = document.getEle mentById ("replaceMe" );
> replace.parent. replaceChild (table, replace);
>[/color]

This is not recommendable. You're setting a block-level element as a
child of an inline element. You can't do that, I'm afraid.
[color=blue]
> If I intend to replace the node several times, should I instead use:
>
> var span = document.create Element ("span");
> span.appendChil d (table);
> var replace = document.getEle mentById ("replaceMe" );
> span.id = replace.id;[/color]

I don't think you can do the above. Each element can have an id which
has to be unique.
[color=blue]
> replace.parent. replaceChild (span, replace);
>[/color]

I don't understand what you're trying to do here. The above code does
not look
[color=blue]
> Does anyone have alternative ideas for replacing portions of documents
> that do not resort to using innerHTML or other abominations?
>
> /Joe[/color]

cloneNode(deep)
"If true, recursively clone the subtree under the specified node;"

http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-3A0ED0A4

DU
--
Javascript and Browser bugs:

http://www10.brinkster.com/doctorunclear/

- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x

http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

[Joe Kelsey]

Re: Dynamic content with replaceChild ()

DU <drunclear@hotR EMOVEmail.com> wrote in message news:<bh8vsu$8h 5$1@news.eusc.i nter.net>...[color=blue]
> Joe Kelsey wrote:
>[color=green]
> > I want to create dynamic content and use replaceChild to switch out
> > different subtrees. I start with a span placeholder:
> >
> > <span id="replaceMe"> </span>
> >
> > Then I use document.getEle mentById ("replaceMe" ) to find the element
> > to replace. I create a subtree using standard DOM:
> >
> > var table = document.create Element ("table");
> > table.insertRow ();
> > ....
> >
> > var replace = document.getEle mentById ("replaceMe" );
> > replace.parent. replaceChild (table, replace);
> >[/color]
>
> This is not recommendable. You're setting a block-level element as a
> child of an inline element. You can't do that, I'm afraid.[/color]

This reply makes no sense.

I can certainly dynamically insert a table into the span and later
remove it. I have tested this.
[color=blue][color=green]
> > If I intend to replace the node several times, should I instead use:
> >
> > var span = document.create Element ("span");
> > span.appendChil d (table);
> > var replace = document.getEle mentById ("replaceMe" );
> > span.id = replace.id;[/color]
>
> I don't think you can do the above. Each element can have an id which
> has to be unique.[/color]

So, DWIM:

var id = replace.id;
....
span.id = id;
[color=blue][color=green]
> > replace.parent. replaceChild (span, replace);
> >[/color]
>
> I don't understand what you're trying to do here. The above code does
> not look[/color]

What happened to your reply? Again, an unintelligible comment.

Does it become clearer if I write the code:

if (0 == yesno)
{
span.removeChil d (span.firstChil d);
}
else
{
span.appendChil d (someFunctionCr eatingTable (x));
{

[color=blue][color=green]
> > Does anyone have alternative ideas for replacing portions of documents
> > that do not resort to using innerHTML or other abominations?
> >
> > /Joe[/color]
>
> cloneNode(deep)
> "If true, recursively clone the subtree under the specified node;"
> http://www.w3.org/TR/2000/REC-DOM-Le...ml#ID-3A0ED0A4[/color]

cloneNode does nothing useful to me, I want to insert a subtree into
the document. cloneNode produces a copy of a subtree, but the subtree
still does not exist in the document. appendChild and replaceChild do
exactly what I want, i.e., insert a subtree into the document. I have
a newly created subtree rooted at a HTMLTable element that I want to
place in (or remove from) the document.

If I remove a subtree using removeChild, do events related to elements
of the subtree get automatically removed or do I have to remove the
events before removing the subtree? Specifically, the table I insert
into the document consists of a variable number of columns, each
column being a <select> node with an attached onChange event listener.
I keep a pointer to the select nodes and may swap out the whole
subtree when other select items change.

Do I have the right idiom here or do I need to use some other means of
swapping content?