dom range.setStart / setEnd

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

这里是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);

在所有文档中，他们引用了“Child”......这解决了这个问题。对于你的小提琴，它将包含字母“h”和两个<p>和</p>标签。取出它们， hel 变为粗体。

<强>更新：

显然，空白会导致问题......

HTML ...

TEST

在这里工作...... jsFiddle

参考... HERE