473,394 Members | 1,797 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

IE: Inserting a dom element into existing text

3
Hi.

I need to insert an image element into text in an iframe in design mode. That part I can do:

Expand|Select|Wrap|Line Numbers
  1. var sel = oEditor.eFrameDoc.selection;
  2. var range =    sel.createRange();
  3. range.pasteHTML('<img src="'+imagePath+'" border="0" />');
But I need a reference to that new IMG tag to do other stuff with it.

In Gecko, I can insert a node dynamically, as one would expect, thus:

Expand|Select|Wrap|Line Numbers
  1. var sel = oEditor.eFrameWindow.getSelection();
  2. var range = sel.getRangeAt(0);
  3. var img = document.createElement('img');
  4. img.setAttribute('src', imagePath);
  5. img.setAttribute('border', 0);
  6. range.insertNode(img);
  7.  
In Gecko, I don't need go looking for my new image in the DOM tree since I created it myself already -- img is the object I need. I can work it after inserting it, no problem.

IE's TextRange is limited -- you can't insert DOM elements directly. So I guess what I need is a way to maybe split an IE TextArea either side of a new "empty element" (whatever that might be), then use emptyObject.insertBefore(img) -- but I'm only guessing.

I've Googled this to death over several hours to no avail (except to find this site! :) Any assistance would be greatly appreciated.

Gruvin.
May 5 '07 #1
2 3432
pronerd
392 Expert 256MB
I need to insert an image element into text in an iframe in design mode. That part I can do:
The lazy option would be to add an ID attribute to the image tag.
[HTML]<img src="'+imagePath+'" id="imageTagICreated" border="0" />[/HTML]

Then you could find it with something like :
Expand|Select|Wrap|Line Numbers
  1. var imageTag = document.getElementById('imageTagICreated'); 

The other option would be to use the insertBefore() or appendChild() methods. These will let you add your created element as a child to other elements. They are supported in both browsers.

http://onlinetools.org/articles/unobtrusivejavascript/chapter3.html
May 6 '07 #2
gruvin
3
The lazy option would be to add an ID attribute to the image tag.
Yes -- I forgot to mention I have (good :) ) reasons not to do that.

The other option would be to use the insertBefore() or appendChild() methods. These will let you add your created element as a child to other elements. They are supported in both browsers.
Ah yes -- except that IE does not support those methods (see my original message) for a TextRange, being as the good folks at M$ evidently decided a range a) must be either a Text or Control thing (can't contain or will at least ignore elements) and b) therefore will only allow the changing of texty type stuff. Yeh! (not)

The most logical thing I would have though could work with insertBerfore would be range(0).parentNode. But no, that would be just too obvious and simple, apparently. :P

Thanks for your help -- I'm still looking for a way to do this. Meanwhile, I've mangled my code left and right to approach the entire (parent) problem differently, just for IE. *sigh*

P.S: This all in IE 6 -- I haven't tried in IE7. Many people are still using 6 anyway.
May 7 '07 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: CB | last post by:
I have a group of documents that previously had no schema, now I have a schema, and I want to use XSLT to fixup the documents by inserting the namespace reference. In other words, my input...
2
by: Wim Roffal | last post by:
I want to insert an option into a select. I know you can do something like: - Myselect.options = new Option('Hello 3'); but that doesn't do what I want because it overwrites an existing option....
1
by: Stanimir Stamenkov | last post by:
I've wondered if it is right thing to do: element.parentNode.insertBefore(element, beforeElement); where 'beforeElement' is one of the 'element.parentNode.childNodes'? First, I've used: ...
2
by: Asad | last post by:
I have a form on a page that has several textareas, and textboxes inside a table (so the table containing the textboxes is also inside the FORM tag). I want to replace the textareas with simple...
1
by: Stephen | last post by:
I have the following for a datagrid that inserts a row into an xml file. It works great, but inserts the data to a new top-level node. I don't know how to specifiy an existing node for the...
0
by: ruediger | last post by:
Hi there, I want to set up an XML Schema for documents of the following structure: The <root> node contains - an optional <message> element with a text attribute, and - arbitrary further...
2
by: C# to XML | last post by:
Hi friends, I am new to csharp and XML : fp=File.OpenText(server.mappath(".\\upload\\")+"test.txt"); string info=fp.readtoend(); string arinfo =new string; char splitter = {'|','^'}; ...
2
by: petermichaux | last post by:
Hi, My AJAX response is a bit of HTML that I insert into the DOM. I extract the contents of the script elements in the response into an array called aScripts. I then want to append these to an...
4
by: Anand | last post by:
Hi, I'm new to Python. we are using python2.4. I wanted to insert an element into an existing xml file. Can anyone help me with this? I've seen lxml and elementTree in python2.5 has some...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
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,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
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...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

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.