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.getElementById ("replaceMe") to find the element
to replace. I create a subtree using standard DOM:

var table = document.createElement ("table");
table.insertRow ();
....

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

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

var span = document.createElement ("span");
span.appendChild (table);
var replace = document.getElementById ("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]

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.getElementById ("replaceMe") to find the element
to replace. I create a subtree using standard DOM:

var table = document.createElement ("table");
table.insertRow ();
....

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

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.

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

var span = document.createElement ("span");
span.appendChild (table);
var replace = document.getElementById ("replaceMe");
span.id = replace.id;

I don't think you can do the above. Each element can have an id which
has to be unique.

replace.parent.replaceChild (span, replace);

I don't understand what you're trying to do here. The above code does
not look

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

/Joe

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]

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.

This reply makes no sense.

I can certainly dynamically insert a table into the span and later
remove it. I have tested this.

I don't think you can do the above. Each element can have an id which
has to be unique.

So, DWIM:

var id = replace.id;
....
span.id = id;

I don't understand what you're trying to do here. The above code does
not look

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

Does it become clearer if I write the code:

if (0 == yesno)
{
span.removeChild (span.firstChild);
}
else
{
span.appendChild (someFunctionCreatingTable (x));
{

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

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?