473,785 Members | 2,761 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Dynamic content with replaceChild ()

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
Jul 20 '05 #1
2 16160
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.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);

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.create Element ("span");
span.appendChil d (table);
var replace = document.getEle mentById ("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
DU <dr*******@hotR EMOVEmail.com> wrote in message news:<bh******* ***@news.eusc.i nter.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.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);


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.create Element ("span");
span.appendChil d (table);
var replace = document.getEle mentById ("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.removeChil d (span.firstChil d);
}
else
{
span.appendChil d (someFunctionCr eatingTable (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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
3569
by: Micha³ Kurowski | last post by:
What I've got: 1) a page with a "window.open('some_html', ...)" 2) "some_html" with basically this: <body onload="document.body.innerHTML=FillIt('some_id')"></body> 3) a script:
25
3510
by: jullag | last post by:
Hi, does anyone know of any javascript method that does the same job as document.write(), but not necessarily at the end of the document? For instance, insert some text inside an element that has a specific ID tag? thanks a lot JL
5
2234
by: Frances | last post by:
I need to replace iframes acc. to what option user chooses in a sel obj.. but figured have to load a blank iframe when pg loads so I can replace it.. (iframe gets put in a pre-existing div..) this is approach.. I'm having some problems and would appreciate some help.. thank you very much... var selItem; var ifrCurr; var div = document.getElementById("divPricing"); // this var not being read inside functions..
7
22498
by: Mike Livenspargar | last post by:
We have an application converted from v1.1 Framework to v2.0. The executable references a class library which in turn has a web reference. The web reference 'URL Behavior' is set to dynamic. We added an entry to the executable's .exe.config file to specify the URL, and under the 1.1 framework this worked well. Unfortunately, this is not working under the 2.0 framework. I see in the Reference.cs file under the web service reference the...
1
6215
by: mail2madhur | last post by:
I need to display different text on label on click of button. <table> <tr> <td> ?????</td> </tr> <tr> <td> <TEXTAREA id="notesId" name="notesdescDisplay" rows=12 cols=83 value=""></TEXTAREA> </td>
9
2986
by: pbd22 | last post by:
Hi. This is just a disaster management question. I am using XMLHTTP for the dynamic loading of content in a very crucial area of my web site. Same as an IFrame, but using XMLHTTP and a DIV. I got the core of the javascript from here: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm I noticed in the demo that sometimes the content takes a long
3
2116
by: arunank | last post by:
Hi, The following code for dynamic table creation is not working. Can anyone please help me. The dynamically created rows and columns are not getting populated. CODE: ========= <html>
10
2642
hoist1138
by: hoist1138 | last post by:
Thanks to anyone who may be able to steer me in the right direction :) Interesting that this works fine in All Browsers BUT Internet Explorer. fairly simple goal...... get a "src" img element attribute and display it (by manipulating DOM elements) on the webpage under a graphic...(for a dynamic label) var mainPic = document.getElementById("placeholder"); var picSrc = mainPic.getAttribute("src");
0
9645
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10155
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10095
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
7502
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6741
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5383
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5513
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4054
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3655
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.