使用jQuery创建一个div元素

Question

我该如何在 jQuery 中创建一个 div 元素？

- useranon

---

请参见：使用jQuery创建HTML元素的最有效方法是什么？ - falsarella

$(document.createElement('DIV')) - Yami Odymel

$('#parent').append('<div>hello</div>');
// 或者 $('<div>hello</div>').appendTo('#parent'); - Sashi yadav

$('#parent').append($('<div>').html('your content')); - Eric

Answer 1

从jQuery 1.4开始，您可以这样向自闭合元素传递属性:

jQuery('<div>', {
    id: 'some-id',
    class: 'some-class some-other-class',
    title: 'now this div has a title!'
}).appendTo('#mySelector');

您可以在文档中找到它。

示例可以在发布的jQuery 1.4版本：你必须知道的15个新功能中找到。

- ian

---

这里是非常好的答案。 - MarkSkayff

这个选项看起来更干净，但似乎由于破折号，例如 data-something，不支持 data 属性。 - Antonio Ooi

Answer 2

你可以使用append（将元素添加到父元素的最后位置）或prepend（将元素添加到父元素的第一位置）：

$('#parent').append('<div>hello</div>');    
// or
$('<div>hello</div>').appendTo('#parent');

另外，你可以像不同的答案中提到的那样使用.html()或.add()。

- cm2

Answer 3

技术上，$('<div></div>') 会“创建”一个 div 元素（更具体地说是 DIV DOM 元素），但不会将其添加到您的 HTML 文档中。您需要将其与其他答案结合使用才能实际上对其进行任何有用的操作（例如使用 append() 方法等）。

操作文档 提供了各种选项来添加新元素。

- samjudson

Answer 4

d = document.createElement('div');
$(d).addClass(classname)
    .html(text)
    .appendTo($("#myDiv")) //main div
.click(function () {
    $(this).remove();
})
    .hide()
    .slideToggle(300)
    .delay(2500)
    .slideToggle(300)
    .queue(function () {
    $(this).remove();
});

- celoron

Answer 5

div = $("<div>").html("Loading......");
$("body").prepend(div);    

- Ish

Answer 6

$("<div/>").appendTo("div#main");

该代码将在<div id="main"></div>后添加一个空白的

- Caius

Answer 7

创建div的简短方法是：

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

现在，自定义的 div 可以添加到任何其他 div 中。

- maxspan

Answer 8

这些都对我起作用，

HTML部分：

<div id="targetDIV" style="border: 1px solid Red">
    This text is surrounded by a DIV tag whose id is "targetDIV".
</div>

JavaScript 代码：

//Way 1: appendTo()
<script type="text/javascript">
    $("<div>hello stackoverflow users</div>").appendTo("#targetDIV"); //appendTo: Append at inside bottom
</script>

//Way 2: prependTo()
<script type="text/javascript">
    $("<div>Hello, Stack Overflow users</div>").prependTo("#targetDIV"); //prependTo: Append at inside top
</script>

//Way 3: html()
<script type="text/javascript">
    $("#targetDIV").html("<div>Hello, Stack Overflow users</div>"); //.html(): Clean HTML inside and append
</script>

//Way 4: append()
<script type="text/javascript">
    $("#targetDIV").append("<div>Hello, Stack Overflow users</div>"); //Same as appendTo
</script>

- Nazmul

Answer 9

$("<div/>").attr('id','new').appendTo('body');    

这将在body中创建一个新的id为"new"的div。

- Ajay

Answer 10

document.createElement('div');

- eomeroff