1

我正在尝试将两个连续的跨度插入 Chrome 上的可编辑正文元素。我的问题是第二个跨度最终在第一个跨度内而不是在它旁边。

我已经简化了我的示例，但在现实生活中，最终用户可能已经移动了光标或在两个插入之间选择了一些文本。 

<html>
<head>
<script>
function load(){
    insert("<span style='color:red'>hello</span>");
    insert("<span>goodbye</span>");
}

function insert(sHtml){

    var oSel = window.getSelection();
    var oRange = oSel.rangeCount > 0 ? oSel.getRangeAt(0) : void 0;

    if(!oRange){
        oRange = window.document.createRange();
        oRange.selectNodeContents(window.document.body);
    }

    var newFrag = oRange.createContextualFragment(sHtml);
    oRange.insertNode(newFrag);
    oRange.collapse(false);
    oSel.removeAllRanges()
    oSel.addRange(oRange);

}
</script>
</head>
<body onload="load()">
</body>
</html>
4

1 回答 1

3

你正在做奇怪而复杂的事情来插入你的节点。为什么使用选择？

使用 jquery，您可以像这样定义插入函数：

function insert(html) {
   $("body").append(html);
}

如果没有 jquery，您将不得不添加节点并在节点中设置文本：

var newNode = document.createElement("span");
newNode.setAttribute("style", "color:red");
newNode.appendChild(document.createTextNode("hello"));
document.body.append(newNode);
于 2012-08-22T15:35:56.020 回答