Создать элемент thats охватывает существующий

Question

Мне нужно создать div, который будет содержать еще один div, который уже существует в DOM.

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

Я создал код, чтобы сделать это, но она отделилась существующий элемент и прикрепить его на новый, так что его последовательность на родительский элемент изменится, он будет добавлен в конец родителя. Я думаю, что это может быть проблемой в будущем, например, если структура управляется с помощью float, возможно?

Так что мой код:

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, идентификаторы начинаются с «новой»), этот обработчик должен работать (для мыши, изменение к тому, что вам нужно):

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

API Ref: http://api.jquery.com/on/