how to replace IMG node in DOM tree with html code

[Lukasz Indyk]

hello

i have a piece of html code, and want to replace every image on my page
with this code. now i do it by replacing IMG node with SPAN node, and
then setting innerHTML property of SPAN node with my html code:

var nodeToReplaceWith = document.createElement("<SPAN>");
nodeToReplaceWith.innerHTML = HTMLCodeToReplaceWith;
node.replaceNode(nodeToReplaceWith);

but when i use this approach i have a problem, because when in my html
code there is ampersand (&), then it is escaped with &amp;
it is strange for me, because other special characters (<,>) are not
escaped.

so, my question is: how to replace IMG node without using "SPAN
approach" described above, and how to avoid escaping ampersand (if
someone knows why only ampersand is escaped, i would be very happy to
hear his explanation).

regards

lukasz indyk

 

[Martin Honnen]

i have a piece of html code, and want to replace every image on my page
with this code. now i do it by replacing IMG node with SPAN node, and
then setting innerHTML property of SPAN node with my html code:

var nodeToReplaceWith = document.createElement("<SPAN>");
nodeToReplaceWith.innerHTML = HTMLCodeToReplaceWith;
node.replaceNode(nodeToReplaceWith);

but when i use this approach i have a problem, because when in my html
code there is ampersand (&), then it is escaped with &amp;
it is strange for me, because other special characters (<,>) are not
escaped.

so, my question is: how to replace IMG node without using "SPAN
approach" described above, and how to avoid escaping ampersand (if
someone knows why only ampersand is escaped, i would be very happy to
hear his explanation).

The W3C DOM in level 1 and 2 doesn't provide any API to replace a node
with a snippet of markup to be parsed. Thus you depend on browser
extensions to do that, IE4+ and Opera 7 provide
element.outerHTML = '...your HTML snippet here'
however for Mozilla and Netscape that doesn't work, your span
replacement is not that bad an approach, alternatively you could use
range extension function createContextualFragment e.g.

function setOuterHTML (element, html) {
if (typeof element.outerHTML != 'undefined') {
element.outerHTML = html;
}
else {
var range;
if (document.createRange && (range = document.createRange())
&& range.createContextualFragment) {
range.selectNode(element);
var docFrag = range.createContextualFragment(html);
element.parentNode.replaceChild(docFrag, element);
}
}
}
for (var i = 0; i < document.images.length; i++) {
setOuterHTML(document.images, '<p>Kibology for all. ' + i + '<\/p>');
}


That way you use outerHTML for IE, Opera (and I think Konqueror) and for
Mozilla/Netscape a document fragment is created from the HTML snippet

 

[Lukasz Indyk]

hello

the approach with "outerHTML" works very well. thanks a lot. but there
is still a problem with escaped ampersand (&). it is still replaced by
&amp;, and no other special character (<,>) is escaped.

do you know how to solve it?

regadrs

 

[Martin Honnen]

Lukasz Indyk wrote:

the approach with "outerHTML" works very well. thanks a lot. but there
is still a problem with escaped ampersand (&). it is still replaced by
&amp;, and no other special character (<,>) is escaped.

do you know how to solve it?

There is nothing wrong with escaping an ampersand as &amp; in HTML,
indeed it is recommended:
http://www.w3.org/TR/html4/charset.html#h-5.3.2

If you think it is a problem then please care to explain in more detail
what you are doing and where the &amp; hurts you, the browser should
display it correctly.

 

[Lukasz Indyk]

the problem is that the code that i use for replacing images is not
actually a clean HTML, but ZPT code (zope page templates, containing
elements of python language code). there is ampersand used in this code
and i have to have it unescaped.

but i understand your explatation why ampersand must be escaped, and now
understand why it is imposible to have it left uescaped by outerHTML. i
will just replace all strings "&amp;" by "&" in other part of my
application.

thanks a lot for your help, it was very, very useful.
best regards,

lukasz indyk