IE: Inserting a dom element into existing text

[gruvin]

Hi.

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

var sel = oEditor.eFrameDoc.selection;
var range =    sel.createRange();
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:

var sel = oEditor.eFrameWindow.getSelection();
var range = sel.getRangeAt(0);
var img = document.createElement('img');
img.setAttribute('src', imagePath);
img.setAttribute('border', 0);
range.insertNode(img);
 

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.

[pronerd]

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 :

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

[gruvin]

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.