如何将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(); 

    } 
}