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


Inserting a (g) node in the middle of a tree (SVG) using jQuery

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

如何调换这个

1
2
3
4
5
6
<svg id="root" ... >
  <g id="child1">...</g>
  <text id="child2">...</text>
  <rect id="child3">...</rect>
  ...
</svg>

对此

1
2
3
4
5
6
7
8
<svg id="root" ... >
  <g id="parent">
    <g id="child1">...</g>
    <text id="child2">...</text>
    <rect id="child3">...</rect>
    ...
  </g>
</svg>

杰西德

我试过了

1
2
3
4
5
6
7
8
var $parent = $("g").attr("id","parent");
var $root = $("#root");
$root.contents().each(function(){
   $child=$(this);
   $child.remove();
   $parent.append($child);
});
$root.append($parent);

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

1
2
3
4
5
6
7
8
9
10
11
12
13
(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解决方案。

我建议：

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

JS小提琴演示。

参考文献：

  • wrapAll()。
相关讨论

这将只对DOM进行一次添加，因此这将很快：

1
$('#root').html(''+$('#root').html()+'');
相关讨论