javascript - 使用 jQuery 在树 (SVG) 中间插入 (g) 节点

Question

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

如何转置这个

<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>');