jQuery中的clone()方法是用來復制一個元素的函數。這個方法會復制元素以及元素所包含的所有內容(包括子元素和文本內容),但不會復制元素和事件處理程序綁定在元素上的JavaScript數據和事件。它只復制元素和元素屬性以及內部的HTML內容。
//通過jQuery clone()復制一個元素及其子元素 $("button").click(function(){ var div = $("div").clone(); $("body").append(div); });
但是,使用clone()方法復制后的元素樣式通常都會失效,尤其是一些動態樣式,這一點需要開發者自行處理。
//使用jQuery .css()方法解決clone()方法造成的樣式丟失問題 $("button").click(function(){ var div = $("div").clone(); div.css("color","red"); //設置新元素的文本顏色為紅色 $("body").append(div); });
如果想完全復制一個元素及其內部的所有樣式,則可以使用outerHTML屬性。
//使用原生JS outerHTML屬性復制元素及其樣式 var div = document.getElementById("myDiv"); var clone = div.cloneNode(true); clone.outerHTML = div.outerHTML; document.body.appendChild(clone);
總之,在使用clone()方法復制元素時需要注意元素樣式的問題,不然會出現很多不必要的錯誤和麻煩。