dom range.setStart/setEnd

Question

我试图只hel在这个小提琴http://jsfiddle.net/yarkpakv/中加粗文字,但它似乎没有起作用,我做错了什么？

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>

Answer 1

您需要可视化<div id="test">元素的DOM结构.它包含三个孩子:

1. 仅包含空格的文本节点.

2. <p>包含具有值的文本节点的元素h.

3. 具有值的文本节点ello.

因此,您的范围必须以<p>元素开头,并在ello文本节点中以两个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);

这是一个小提琴.