插入（克）中的树的中间使用jQuery节点（SVG）(Inserting a (g) node in

什么是插入在树中间的节点最值得推荐的/有效的方式。

如何转本

<svg id="root" ... >
  <g id="child1">...</g>
  <text id="child2">...</text>
  <rect id="child3">...</rect>
  ...
</svg>

这

<svg id="root" ... >
  <g id="parent">
    <g id="child1">...</g>
    <text id="child2">...</text>
    <rect id="child3">...</rect>
    ...
  </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('<div id="parent" />');

JS提琴演示 。

参考文献：

• wrapAll()

Answer 2:

这将使只有一个除了DOM，所以这将是快：

$('#root').html('<div id=parent>'+$('#root').html()+'</div>');

文章来源: Inserting a (g) node in the middle of a tree (SVG) using jQuery