Question

我正在尝试将HTML从一个元素复制到另一个元素。

假设我有以下内容。我想将结构从“.from”复制到“.to”。我可以用.html（）复制批发，但这对于一棵大树来说很慢，并且在浏览器重绘时会导致闪烁。

我想知道是否有人知道我可以递归地挖掘每个元素的树并逐个元素地比较。因此，如果只有一个元素的HTML或属性发生了变化，我只需要改变那个元素 - 其他一切都保持不变。

在下面的示例中，“。a”将具有未更改的属性，但更改了HTML。 “.b”需要挖掘其子项并更改“.x”的属性和HTML。必须在目标元素中创建“.e”。

有谁知道这样做的明智方法？

<ul class="to">
    <li class="a">test1</li>
    <li class="b">
         <div class="x">test2</div>
    </li>
    <li>test3</li>
    <li class="c">test4</li>
</ul>

<ul class="from">
    <li class="a">test5</li>
    <li class="b">
         <div class="y">test6</div>
    </li>
    <li class="c">test7</li>
    <li class="d">test4</li>
    <li class="e">test</li>
</ul>

Answer 1

请查看我的解决方案：http://javascripts.svn.sourceforge.net/viewvc/javascripts/javascripts/js.prototype-extensions/js/extensions/element.js?view=markup - 从评论Smooth update of DOM subtree开始，此代码可能很容易被jQuery采用。

简而言之，函数updateSmoothly逐节点地比较两个DOM子树（源和目标），尝试保留现有节点并尽可能在源子树中进行最小的更改。在您的示例中，它将更改文本值，添加/删除现有文本/元素节点的CSS类，并仅将一个LI附加到列表中。

此解决方案适用于生产环境，即使在IE8中也可以足够快地更新1300多行表。

P.S。对另一个问题的类似答案：Updating gigantic HTML table with ajax

Jquery递归地比较了它们的html和属性上的两个元素

1 个答案: