javascript jQuery在元素内创建元素

jQuery Create element inside an element

提问by user1246035

I've seen many guides online for create a new element in jQuery such as the following code

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

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

This creates one input element and appends it. I want to create a div element and add this input element to it and then append it. How would i go about doing that?

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

Thanks, Alex

谢谢，亚历克斯

回答by Didier Ghys

You can use .wrap()to wrap your element into another one before appending it:

您可以使用.wrap()在附加之前将您的元素包装到另一个元素中：

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

Note: you'd have to call .parent() because .wrap() does notreturn the wrapping element

注意：你必须调用.parent（），因为.wrap（）并没有返回缠绕元件

DEMO

演示

---

---

You could also do it in several steps if you need to add attributes to the wrapping div, syntax is similar:

如果需要向包装 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

演示

回答by Ry-

Same syntax, really:

相同的语法，真的：

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

回答by Simon Edstr?m

This maybe help you:

这可能会帮助你：

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

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

回答by Jamiec

And another way:

而另一种方式：

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

http://jsfiddle.net/xcZjt/

http://jsfiddle.net/xcZjt/

回答by ShankarSangoli

You can try this.

你可以试试这个。

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

回答by gdoron is supporting Monica

Use the wrap function:

使用包装功能：

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

wrap docs:

包装文档：

Description: Wrap an HTML structure around each element in the set of matched elements.

描述：将 HTML 结构包裹在匹配元素集中的每个元素周围。