2

ツリーの途中にノードを挿入する最も推奨/効率的な方法は何ですか?

これを転置する方法

<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 ソリューションを探しています。

4

2 に答える 2

4

私はお勧めします：

$('#root > div').wrapAll('<div id="parent" />');

JS フィドルのデモ。

参考文献:

于 2012-09-22T19:55:50.473 に答える
0

これにより、DOM への追加が 1 つだけになるため、高速になります。

$('#root').html('<div id=parent>'+$('#root').html()+'</div>');
于 2012-09-22T19:54:18.930 に答える