1

Chrome で編集可能な body 要素に 2 つの連続したスパンを挿入しようとしています。私の問題は、2 番目のスパンが最初のスパンの隣ではなく、最初のスパンの内側になってしまうことです。

例を単純化しましたが、実際には、エンド ユーザーはカーソルを移動したり、2 つの挿入の間にテキストを選択したりした可能性があります。 

<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 に答える