By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,912 Members | 1,723 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,912 IT Pros & Developers. It's quick & easy.

Dynamic content with replaceChild ()

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
DU
Joe Kelsey wrote:
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-Le...ml#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/doctorunc...e7Section.html

Jul 20 '05 #2

P: n/a
DU <dr*******@hotREMOVEmail.com> wrote in message news:<bh**********@news.eusc.inter.net>...
Joe Kelsey wrote:
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.


This reply makes no sense.

I can certainly dynamically insert a table into the span and later
remove it. I have tested this.
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.


So, DWIM:

var id = replace.id;
....
span.id = id;
replace.parent.replaceChild (span, replace);


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));
{

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-Le...ml#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?
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.