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