473,666 Members | 2,116 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 nodeToReplaceWi th = document.create Element("<SPAN> ");
nodeToReplaceWi th.innerHTML = HTMLCodeToRepla ceWith;
node.replaceNod e(nodeToReplace With);

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 2484


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 nodeToReplaceWi th = document.create Element("<SPAN> ");
nodeToReplaceWi th.innerHTML = HTMLCodeToRepla ceWith;
node.replaceNod e(nodeToReplace With);

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.outerHT ML = '...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 createContextua lFragment e.g.

function setOuterHTML (element, html) {
if (typeof element.outerHT ML != 'undefined') {
element.outerHT ML = html;
}
else {
var range;
if (document.creat eRange && (range = document.create Range())
&& range.createCon textualFragment ) {
range.selectNod e(element);
var docFrag = range.createCon textualFragment (html);
element.parentN ode.replaceChil d(docFrag, element);
}
}
}
for (var i = 0; i < document.images .length; i++) {
setOuterHTML(do cument.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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
4788
by: Geathaa | last post by:
Hi everyone, I want to transform a xml document containing the description of a menu tree to HTML. The MenuTree XML contains the target URL for each tree node. Some URL's contain parameters which are only known at runtime though. These "runtime parameters" are also set as global parameters in the XSLT stylesheet. What I want to do now is check the URL defined in the XML and replace any "runtime parameter" with the stylesheet parameter...
8
2214
by: Ryan Stewart | last post by:
Putting the following code in a page seems to make it go into an infinite loop unless you give it a very simple node to work with. Either that or it's very very slow. I'm somewhat new to this, having limited experience with hacking out JavaScript but no serious coding with it. I do have programming experience though. The logic seems fine to me. Is there something I'm missing? <script type="text/javascript"> var out = "";
5
3113
by: Patient Guy | last post by:
In my reading of the Strict and Transitional DTD for HTML 4.0, the table row (TR) elements are contained within table section elements: THEAD, TFOOT, and TBODY. The table section elements are the defined contents of the TABLE element. The TR element is not defined as an "immediate" or "direct" contained element of TABLE. Given that
3
1448
by: Art | last post by:
What's the most efficient way to replace characters in an XML document before it is loaded into a parser? Chars I'd want to replace are in attributes and there can be N attributes, also let's assume that I'm not familiar w/ the structure of the XML so that I'll have to read/replace/load via stream. Is this possible OpenStream->Replace char(s)->To XML parser ? If so then how? Art
2
1813
by: Sam | last post by:
Hi, Say I have the following Treeview : N1 |-N11 |-N12 |-N121 |-N122 N2 |-N21
3
2479
by: gregpinero | last post by:
Hi guys, What I'm trying to do is find all instances of an acronymn such as IBM on a webpage and replace it with <acronym title="International Business Machines">IBM</acronym>. However in my code below it replace the <, and > with &lt; and &gt;. Thus it replaces IBM with: &lt;acronym title="International Business Machines"&gt;IBM&lt;/acronym&gt;
10
8792
by: Simon Brooke | last post by:
The DOM API has included public Node importNode(Node,boolean) as a method of the Document interface for a long time. Does anything actually implement it? Xerces 2 is giving me: org.w3c.dom.DOMException: NOT_SUPPORTED_ERR: The implementation does not support the requested type of object or operation. at org.apache.xerces.dom.CoreDocumentImpl.importNode(Unknown Source) at org.apache.xerces.dom.CoreDocumentImpl.importNode(Unknown Source)
1
4758
by: BeginingOfLife | last post by:
i am using a java script to create a tree view in my html page. i got that script from this link : http://destroydrop.com/javascripts/tree/ given script is static script creations for tree view,but i want to add a new node on that tree. i select a node location in a dropdown control(nodes present in a tree will appear in this control). i will give the new node name in a text box control. when i press a button in my html page
4
6959
by: Ouray Viney | last post by:
Xml <ib>8.4.27.5</ib> python from xml.dom import minidom xmldoc = minidom.parse('C:\TestProfile.xml') xmldoc
0
8444
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
8869
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8781
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
8551
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,...
0
7386
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5664
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
4368
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2771
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
2011
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.