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

    } 
}