jQuery在元素内创建元素答案

【问题标题】：jQuery Create element inside an elementjQuery在元素内创建元素
【发布时间】：2012-03-24 04:40:29
【问题描述】：

我在网上看到很多关于在 jQuery 中创建新元素的指南，例如以下代码

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

这将创建一个输入元素并附加它。我想创建一个 div 元素并将这个输入元素添加到它，然后附加它。我该怎么做呢？

谢谢，亚历克斯

【问题讨论】：

追加和添加在上面的上下文中是一样的。你的问题没有意义。

标签： javascript jquery dom append

【解决方案1】：

你可以试试这个。

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

【讨论】：

但我想使用与输入相同的方式向 div 添加 id 和类。
wrap 返回原始元素集，而不是包装器。
@JamesMontagne - 我认为wrap 将返回用您传递的元素包裹的元素。
但是如果你调用 append 它只会将原始元素附加到 dom。 jsfiddle.net/xzrTx/3

【解决方案2】：

使用换行功能：

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 结构。

【讨论】：

wrap 返回原始元素集，而不是包装器。
@JamesMontagne。正确的。固定。

【解决方案3】：

您可以使用.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

【讨论】：

【解决方案4】：

语法相同，真的：

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

【讨论】：

详细...为什么不使用wrap？
@gdoron：请参阅下面 OP 对 ShankarSangoli 回答的评论。
@gdoron：我很困惑；为什么要求有id 属性是个问题？
没关系。但他只是用输入做的，对 div 做同样的事情，你为什么问？？？（我怪他，不是你……）

【解决方案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);

【讨论】：

【解决方案6】：

还有一种方式：

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

http://jsfiddle.net/xcZjt/

【讨论】：