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-empty-strong-node')
range = document.createRange()
range.selectNodeContents(node)
window.getSelection().addRange(range)

Trying other tricks like adding an empty text node inside the element node or setting the range start inside the node and the range end somewhere else, and then collapsing the range also doesn't work. Anoyone has an Idea?

Answer 1

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).