Как обернуть элемент страницы динамически сгенерированным элементом, используя jQuery?

Question

У меня есть следующий код

var input = $('#el_id');
wrapper = $(document.createElement('div'));
wrapper.addClass('small');
wrapper.css('width',200);
input.wrap(wrapper);

alert(input.children().length)

Я получаю 0 для длины детей. То, что я хочу, это:

<div class="small" style="width: 200px;">
     <input type="text" id="el_id" />
</div>

Но я хочу, чтобы маленький div генерировался динамически. Есть идеи, почему это не работает?

UPDATE

Оказывается, моя проблема заключается в другой строке кода. Я хочу назначить оболочку переменной после переноса и:

block = input.wrap("<div class='"+container_class+"' style='width: "+wrap_width+"px;'></div>");

не работает. Он возвращает ввод, который имеет смысл. Но как я могу вернуть упаковщик?

Спасибо!

Answer 1

Я верю, что вы все делаете правильно.

Вам просто нужно сохранить результаты функции переноса в переменную:

Редактировать: Обновлен код для получения родительского ():

var wrapped = input.wrap(wrapper).parent();
alert(wrapped.children().length);

Answer 2

Simple. Вы пытаетесь обернуть объект jquery, а не объект dom, чего ожидает функция wrap ().

Answer 3

Из документации видно, что wrap () принимает только элемент DOM или строку. Вы передаете ему объект jQuery, который может не работать. Я бы попробовал это:

$('#el_id').wrap('<div class="small" style="width: 200px;"></div>');