javascript - 代码效率专家——操作列表——字符串比较——将元素追加到另一个div

Question

我有一个很大的名单，其中包括:

***orginal list***
<div class="ms-contactcardtext3" id="ProfileViewer_ProfileDetails">
   <div cellpadding="0" cellspacing="0" class="ms-my-profileDetails">
    <div>office: <a href="http://vg.no">Oslo</a></div>
    <br><div>User type : <a href="http://vg.no">Ansatt i XXX</a></div>
    <br><div>Company : <a href="http://vg.no">XXX</a></div>
    <br><div>phone: <a href="http://vg.no">+47 444444</a>
    </div>
</div>                                                                     

我想操纵它并将其移动到同一页面上的目标 div

***List I want***
<div class="destination">    
 <div class="company">Company : <a href="http://vg.no">XXX</a></div>
 <div class="userType">User type : <a href="http://vg.no">Ansatt i XXX</a></div>
 <div class="phone">phone: <a href="http://vg.no">+47 444444</a></div>
 <div class="office">office: <a href="http://vg.no">Oslo</a></div>
</div>

PS - 阅读此内容

1. 我无法在大列表中添加类/ID，因此我必须使用字符串比较
2. 列表可能会不时更改，因此每个元素的顺序可能会更改，但我知道顺序

Fiddler example HERE <-- 示例代码

Answer 1

如果您要向 DOM 添加大量元素，那么您可能需要考虑使用:

<强> createDocumentFragment()

Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry). Consequently, using document fragments often results in better performance.

DocumentFragment are supported in all browsers, even Internet Explorer 6, so there is no reason to not use them.

Reflow is the process by which the geometry of the layout engine's formatting objects are computed.

由于您要添加元素，因此最好将这些元素添加到文档片段，然后将这些元素附加到 DOM。