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

你可以试试这个。

  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);

Answer 4

使用wrap函数：

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

包裹docs：

描述：围绕匹配元素集中的每个元素包装HTML结构。

Answer 5

这可能对你有帮助：

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 6

另一种方式：

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

http://jsfiddle.net/xcZjt/

jQuery在元素中创建元素

6 个答案: