在 jQuery 中创建 div 元素

如何在jQuery 中创建div元素?

答案

从 jQuery 1.4 开始,您可以将属性传递给自闭元素,如下所示:

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

这是在文档中

可以在jQuery 1.4 Released 中找到示例:必须了解的 15 个新功能

您可以使用append (在父级的最后一个位置添加)或prepend (在父级的第一个位置添加):

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

或者,您可以使用在其他答案中提到的.html().add()

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

操作文档为您提供了有关如何添加新元素的所有各种选项。

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();
});
div = $("<div>").html("Loading......");
$("body").prepend(div);
$("<div/>").appendTo("div#main");

会将空白 div 附加到<div id="main"></div>

创建 div 的一种简单方法是

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

现在,可以将自定义 div 附加到任何其他 div。

这些都为我工作

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>
$("<div/>").attr('id','new').appendTo('body');

这将在主体中创建 ID 为 “new” 的新 div。

document.createElement('div');