How to place caret inside an empty DOM Element Node

Question

How can I place the caret (collapsed range) inside an empty element node. This code is supposed to work, but it doesnt.

node = document.getElementById(\'some         


        

Answer 1

I found that if you do this for Chrome:

<div id="select-this-element"> <br style="content: no-close-quote;" /></div>

It will work the same way that works in Firefox and Opera.

Answer 2

This is possible in Firefox and Opera, but impossible in both WebKit and IE <= 8.

WebKit has a long-standing bug to fix this: https://bugs.webkit.org/show_bug.cgi?id=15256 for the empty element case and https://bugs.webkit.org/show_bug.cgi?id=23189 for the general case of placing the caret at the start of a text node. Last I heard it's likely to be years before it's fixed.

IE <= 8 has all kinds of issues around selections, of which this is but one. IE 9 introduced DOM2 Range support and HTML5 Selection support and your code may well work in IE 9 (I can't test it right now).