469,356 Members | 2,003 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

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 3327
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

Post your reply

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

Similar topics

1 post views Thread by CB | last post: by
2 posts views Thread by Wim Roffal | last post: by
1 post views Thread by Stanimir Stamenkov | last post: by
2 posts views Thread by C# to XML | last post: by
2 posts views Thread by petermichaux | last post: by
4 posts views Thread by Anand | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.