1、detach()的使用場合
html
當咱們要對一個元素進行大規模的增刪改的時候,咱們能夠用detach將這個元素提取出來,而後在這個元素上進行操做,而不是在整個dom文檔中進行操做。jquery
好處就是:減小對整個dom文檔的修改,從而減小頁面重繪;app
2、實例dom
首先對#container元素綁定click事件,而後利用detach將其脫離文檔,而後再建立兩個child元素,追加到#container元素中,最後將#container從新添加到bodyui
<!DOCTYPE html> <head> <title>jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> div.monkey, #container {}{ width:120px; height:120px; line-height:60px; } div.monkey {}{ border:1px solid black; } </style> </head> <body> <div class="monkey"> </div> <div id="container"> </div> <script src="jquery-1.12.0.js"></script> <script> $(function(){ //事件代理 $('#container').on('click',function( event ){ console.log( $(event.target).text() ); }); //利用detach將container從dom文檔中剝離開 var container = $('#container').detach(); var child1 = '<div>I am Monkey</div>'; var child2 = '<div>Monkey is me</div>'; //將child一、child2插入container中 $(container).append( child1 ) .append( child2 ); //將container從新插入body中 $('body').append( container ); }); </script> </body> </html>
參考資料: jquery中detach()移除元素 http://www.studyofnet.com/news/1225.htmlspa