469,306 Members | 1,881 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,306 developers. It's quick & easy.

how to replace IMG node in DOM tree with html code

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
Jul 23 '05 #1
4 2303


Lukasz Indyk wrote:
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[i], '<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
--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #2
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
Jul 23 '05 #3


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.

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #4
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
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by Ryan Stewart | last post: by
3 posts views Thread by gregpinero | last post: by
4 posts views Thread by Ouray Viney | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
1 post views Thread by Geralt96 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.