mixing innerHTML and replaceChild - no good ...

Micha³ Kurowski · Jun 28, 2004

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:

function FillIt(my_id) {
var inner = window.opener.document.getElementById(my_id).cloneNode(true);

var a = document.createElement('a');
a.setAttribute('title', 'Close this window');
a.setAttribute('href', 'javascript:self.close()');
var img = document.createElement('img');
img.setAttribute('src', 'some_image');
img.setAttribute('alt', 'pop_down');
a.appendChild(img);

inner.replaceChild(a, inner.getElementById('popup'));
return inner.innerHTML;
}

This won't work. For sure I am doing something dumb in here (I'm a
newbie) but I think "innerHTML" just won't work with "replaceChild".

Please note there's only one 'popup' ID in my original DOM tree (it's
a table) and no, I'd not like to iterate on all the table elements just
to put it together in the end ...

Looking for some advise.
Thanks,

DU · Jun 28, 2004

MichaÅ‚ Kurowski said:
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:

function FillIt(my_id) {
var inner = window.opener.document.getElementById(my_id).cloneNode(true);

Why do you clone the node if you want to replace one of its child? I
don,t see your code (whole document) here, so I don't understand this.

var a = document.createElement('a');

I'd recommend to choose better identifiers when working with dynamically
DOM created elements. I personally use obj as a prefix or DOMobj.

a.setAttribute('title', 'Close this window');

It is known, recognized to avoid resorting to setAttribute when there is
already an DOM 2 HTML attribute which can be used. Often, such DOM 2
attribute will work much better.

a.title = "Close this window";
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-78276800

a.setAttribute('href', 'javascript:self.close()');

a.onclick = new Function ("evt", "if(self.close()) {self.close();};");

var img = document.createElement('img');
img.setAttribute('src', 'some_image');

img.src = "some_image";

img.setAttribute('alt', 'pop_down');
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95636861

a.appendChild(img);

inner.replaceChild(a, inner.getElementById('popup'));

inner is not the real node: inner is a copy, a clone of the node.

What was wrong with calling a function to do this in the opener, not in
the popup?
In the opener:
var objParentNode = document.getElementById("some_id");
(...your code here...)
and then
objParentNode.replaceChild(a, document.getElementById("popup"));

return inner.innerHTML;
}

This won't work. For sure I am doing something dumb in here (I'm a
newbie) but I think "innerHTML" just won't work with "replaceChild".

Please note there's only one 'popup' ID in my original DOM tree (it's
a table) and no, I'd not like to iterate on all the table elements just
to put it together in the end ...

Looking for some advise.
Thanks,

It's harder to see what could be wrong without seeing all the code and
what is involved in your window.

DU

DU · Jun 28, 2004

DU wrote:

a.onclick = new Function ("evt", "if(self.close()) {self.close();};");

This can not really work since the link has no href value. I'd suggest
to use a real button (an HTML button) instead since such current "link"
is a browser action, a browser command and not a resource to retrieve
and to load and then to code the onclick event. Like this:

var objButton = document.createElement("button");
objButton.type = "button";
objButton.onclick = new Function("evt", "if(self.close())
{self.close();};");
objButton.appendChild(document.createTextNode("Close this window"));

DU

Micha³ Kurowski · Jun 28, 2004

DU said:
Why do you clone the node if you want to replace one of its child? I
don,t see your code (whole document) here, so I don't understand this.

OK, I was not clear enough, see below, please.
Cloning is just of the things I tried ...
It doesn't change much.

[snip]

Thanks a lot for info on W3C attribute names.

What was wrong with calling a function to do this in the opener, not in
the popup?
In the opener:
var objParentNode = document.getElementById("some_id");
(...your code here...)
and then
objParentNode.replaceChild(a, document.getElementById("popup"));

This will break the whole purpose of the thing.

What I try to do is to use an "onload" event in a new window to copy
the whole table from the opener. I'm sure it must be done in the new
window ...

How would you let it know about the "objParentNode" ?
Pehaps "window.opener" could be used in some other way ?

Thanks.

Extract Width and Height of image	4	Apr 29, 2007
Javascript, Firefox, InnerHTML and AJAX	6	Jul 27, 2007
Image shifts to the right when export the page to pdf	4	May 5, 2023
Stylesheet problem with generated nodes	11	Dec 15, 2006
Help with my responsive home page	2	Dec 14, 2022
Load Body html on button click.	3	Sep 29, 2008
no error but not running in mozilla	1	Jan 17, 2006
crossobj has no properties error in mozilla	1	Jan 12, 2006

mixing innerHTML and replaceChild - no good ...

Micha³ Kurowski

DU

DU

Micha³ Kurowski

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads