創建包含現有元素的元素

Question

我需要創建一個包含DOM中已經存在的另一個div的div。

<div class='a'></div>到<div class='b'><div class='a'></div></div>

我創建了一個代碼來做到這一點，但它脫離現有的元素並將其安裝在新的，所以它的父元素順序會發生變化，這將在結尾處添加的父母。我認爲這可能是未來的一個問題，例如，如果結構是用浮標管理的，也許？

所以我的代碼是：

var obj = $('#existingDiv'); 
var p = obj.parent(); 
var d = obj.detach(); 
var n = p.append('<div id="newDiv"></div>'); 
$("#newdiv").append(d); 

這個代碼的另一個問題是，我要創建新的div（id="newDiv"）的參考或whatelse以後使用它。如果函數不需要引用新元素，只需使用另一種自動方法，則會更好，但這不是真正的問題。

Answer 1

好像你正在尋找wrap()：

$("#existingDiv").wrap("<div id='newDiv'></div>"); 

這種方法將在準確位置的現有元素是插入新的包裝元素，而並不需要打造一個包裝一個jQuery對象。

Answer 2

您可以使用.wrap()這樣的 -

$('div.a').wrap("<div class='b'></div>"); 

Answer 3

在你的代碼回答第二個問題（創造新創建的元素的引用）可以與.on()方法來實現。如果你也有類似的命名約定的所有新元素（IE，ID的全部以「新」），該處理程序，就可以（爲點擊，改變你的需要）：

$(document).on('click', '[id^="new"]', function() { 
    //do stuff here 
    var currentID = $(this).attr("id"); // <--Grabs ID of clicked element 
}); 

API參考：http://api.jquery.com/on/