jQuery Создать элемент внутри элемента

Question

Я видел много онлайн-руководств по созданию нового элемента в jQuery, такого как следующий код

var input = $('<input>', {
    id: 'FormUsername',
    name: 'username',
    type: 'text',
    value: 'Enter your username...',
    focusin: function() {
        $(this).val('');
    }
}).appendTo(someElement);

Это создает один элемент ввода и добавляет его.Я хочу создать элемент div и добавить этот элемент ввода к нему, а затем добавить его.Как мне это сделать?

Спасибо, Алекс

Answer 1

Вы можете использовать .wrap () , чтобы обернуть ваш элемент в другой перед добавлением:

var input = $('<input>', {
    id: 'FormUsername',
    name: 'username',
    type: 'text',
    value: 'Enter your username...',
    focusin: function() {
        $(this).val('');
    }
}).wrap('<div/>').parent().appendTo(someElement);

Примечание: вам придется вызывать .parent (), потому что .wrap () не возвращает элемент обтекания

DEMO

---

Вы также можете сделать это в несколько этапов, если вам нужно добавить атрибуты в div для упаковки, синтаксис аналогичен:

var input = $('<input>', { ... });

// create a div element with an ID=wrapper
$('<div/>', { id: 'wrapper' })
    // append the input to it
    .append(input)
    // append the div to "someElement"
    .appendTo(someElement);

DEMO

Answer 2

Тот же самый синтаксис, действительно:

var input = $('<input>', {
    id: 'FormUsername',
    name: 'username',
    type: 'text',
    value: 'Enter your username...',
    focusin: function() {
        $(this).val('');
    }
});

var div = $('<div>', {
    id: 'SomeWrapperDiv'
}).append(input);

div.appendTo(someElement);

Answer 3

И еще один способ:

$('#someElement').append($('<span></span>').append(input));

http://jsfiddle.net/xcZjt/

Answer 4

Это может вам помочь:

http://jsfiddle.net/Eek7N/1/

var div = $("<div>");

var input = $('<input>', {
id: 'FormUsername',
name: 'username',
type: 'text',
value: 'Enter your username...',
focusin: function() {
    $(this).val('');
}
});

div.html("I'm the div");

div.append(input);

$("body").append(div);​

Answer 5

Используйте функцию обтекания:

var input = $('<input>', {
id: 'FormUsername',
name: 'username',
type: 'text',
value: 'Enter your username...',
focusin: function() {
    $(this).val('');
}
}).wrap('<div></div>').parent().appendTo(someElement);

упаковка документы :

Описание: обернуть структуру HTML вокруг каждого элемента в наборе соответствующих элементов.

Answer 6

Вы можете попробовать это.

  var input = $('<input>', {
    id: 'FormUsername',
    name: 'username',
    type: 'text',
    value: 'Enter your username...',
    focusin: function() {
        $(this).val('');
    }
  })
  $('<div>', {
    id: 'divId',
    class: 'className'
  })
  .append(input)
  .appendTo(someElement);