dom range.setStart / setEnd [英] dom range.setStart / setEnd
问题描述
我正在尝试加粗文本 hel
在这个小提琴 http://jsfiddle.net/yarkpakv/ ,但似乎没有工作,我做错了什么?
I am trying to bold only the text hel
in this fiddle http://jsfiddle.net/yarkpakv/ but it does not seem to be working, 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>
推荐答案
您需要可视化< div id =test>
元素的DOM结构。它包含三个孩子:
You need to visualize the DOM structure of your <div id="test">
element. It contains three children:
-
仅包含空格的文本节点。
A text node that contains only white space.
< p>
元素,其中包含$ h
的文本节点。
The <p>
element which contains a text node that has the value h
.
具有值 ello
的文本节点。
所以你的范围必须从< p>
元素,并在$ code> ello 文本节点之间,两个 l
字符之间。因此:
So your range must start with the <p>
element and ends in the ello
text node, between the two l
characters. Therefore:
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);
这是一个小提琴。
这篇关于dom range.setStart / setEnd的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!