Dom range.setStart / setEnd

Question

I am trying to highlight only the text helin this http://jsfiddle.net/yarkpakv/ script , but it doesn't seem to work, what am I doing wrong ???

var range = document.createRange();
var root_node = document.getElementById("test");

range.setStart(root_node,0);
range.setEnd(root_node,3);

var newNode = document.createElement("b");

range.surroundContents(newNode);

<div id="test">
    <p>h</p>ello    
</div>

Run codeHide result

Answer 1

You need to visualize the DOM structure of your element <div id="test">. It contains three children:

• Node text containing only space.

• An element <p>that contains node text that matters h.

• The text node that matters ello.

, <p> ello node, l. :

var range = document.createRange();
var root_node = document.getElementById("test");

// Start at the `<p>` element.
range.setStart(root_node, 1); 

// End in the `ello` text node, between the two `l`s.
range.setEnd(root_node.childNodes[2], 2); 

var newNode = document.createElement("b");

range.surroundContents(newNode);

fiddle.

Answer 2

...

var range = document.createRange();
var root_node = document.getElementById("test");

range.setStart(root_node.firstChild,0);
range.setEnd(root_node.firstChild,3);

var newNode = document.createElement("b");

range.surroundContents(newNode);

""... . Fiddle "h" <p> </p>. , hel .

UPDATE

-, ...

HTML...

... jsFiddle

...