使用jQuery在树的中间插入（g）节点（SVG）

在树的中间插入节点的最佳建议/有效方法是什么。

如何转置这个

 ... ... ... ...  

对此

   ... ... ... ...   

@jsFiddle

我试过了

 var $parent = $("g").attr("id","parent"); var $root = $("#root"); $root.contents().each(function(){ $child=$(this); $child.remove(); $parent.append($child); }); $root.append($parent); 

我也试过在这个答案中使用moveTo方法

 (function($){ $.fn.moveTo = function(selector){ return this.each(function(){ var cl = $(this).clone(); $(cl).appendTo(selector); $(this).remove(); }); }; })(jQuery); $root.contents().each(function() { $(this).moveTo($parent); }); 

所有这些方法都在简单的场景中工作，但是当树真的很大时，浏览器只是挂起，是否有更有效的方法来执行此操作？
我正在寻找一个jQuery或纯JavaScript的解决方案。

Answer 1

我建议：

 $('#root > div').wrapAll('
'); 

JS小提琴演示 。

参考文献：

• wrapAll() 。

Answer 2

这将只对DOM添加一个，所以这将是快速的：

 $('#root').html('
'+$('#root').html()+'
');