jQuery 文件碎片處理

edithfang發表於2014-06-15
jQuery

通過JS操作DOM節點可能以節點為單位進行,比如新增節點,可以createElement,createTextNode,然後用appendChild把文字節點和容器節點繫結在一起,然後再用appendChild或insertBefor新增到DOM樹中.但如果要往DOM樹中動態新增大量的節點.就會很麻煩.而且每次都會重新整理DOM，造成效能上的缺陷。

解決方法是使用文件碎片這個方法建立文件碎片。

我個人覺得應該把這個翻譯成文件片段比較合適。

使用jQuery解決方案。 


<span style="font-family:FangSong_GB2312;font-size:18px;"><html>  
<head>  
    <title></title>  
</head>  
<body>  
<ul>  
</ul>  
<script type="text/javascript"   src="jquery-1.10.2.min.js"></script>  
<script type="text/javascript">  
    var arr = ["baidu","sina","telcent","ali"];  
    var fragment = document.createDocumentFragment();  
    $.each(arr,function(i,item){  
        var newItem = $("<li>"+item+"</li>")[0];  
        fragment.appendChild(newItem);  
    });  
    $("ul")[0].appendChild(fragment);  
</script>  
</body>  
</html></span>

也可以使用下面的方法來解決 



<span style="font-family:FangSong_GB2312;font-size:18px;"><html>  
<head>  
    <title></title>  
</head>  
<body>  
<ul>  
</ul>  
<script type="text/javascript"   src="jquery-1.10.2.min.js"></script>  
<script type="text/javascript">  
    var arr = ["baidu","sina","telcent","ali"];  
  
    var html = "";  
    $.each(arr, function(index, val) {  
        html += "<li>" + val + "</li>";   
    });  
    $('ul').html(html);  
</script>  
</body>  
</html></span>

效果是相同的。

當然,你也可以建個新的節點,比如說div,先將oP新增到div上,然後再將div新增到body中.但這樣要在body中多新增一個<div></div>.但文件碎片不會產生這種節點.

注意:繫結碎片實際上是把碎片的內容附加到被繫結節點下面.並不會產生類似<fragment></fragement>的節點;

Best Wishes .

程式設計 程式設計師 JQUERY
相關閱讀
評論(2)

相關文章