如何將DOM對象拆分為2

Question

我有一個dom： <p><b>ABC</b>DEF<em>GHIK</em> 。 現在，我想將其拆分為<p><b>ABC</b>DEF<em>G</em></p> <p><em>HIK</em></p> 。 你們有什么想法嗎？

Answer 1

我發現使用rangy的可行方法。 Rangy具有強大的功能：extractContents（從范圍中提取內容）。 所以這里的解決方案：

node(p).split( p.querySelector('em').firstChild, 2); // <p>012<em>abc</em>345</p>

function node(node){
    var _node = node;
    return{
        split: split

    }
    function split(node, offset){
        var blockL = document.createElement(_node.nodeName),
            blockR = document.createElement(_node.nodeName);

        var rangeL = rangy.createRange();
        rangeL.setStart(_node.firstChild, 0);
        rangeL.setEnd(node, offset);

        var rangeR = rangy.createRange();
        rangeR.setStart(node, offset);
        rangeR.setEnd(_node.lastChild, rangy.dom.getNodeLength(_node.lastChild));

        var contentL = rangeL.extractContents(),
            contentR = rangeR.extractContents();

        while(contentL.firstChild) blockL.appendChild(contentL.firstChild);
        while(contentR.firstChild) blockR.appendChild(contentR.firstChild);

        _node.parentNode.insertBefore(blockL, _node);
        _node.parentNode.insertBefore(blockR, _node);

        _node.remove();

    }
}