2

我正在尝试以一种智能的方式将 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>
4

1 回答 1

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 多行的表。

PS 对另一个问题的类似回答：Updating gigantic HTML table with ajax

于 2012-11-11T00:09:53.700 回答