如何在jQuery中创建div元素?


当前回答

从jQuery1.4开始,您可以将属性传递给自封闭元素,如下所示:

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

在文档中

示例可以在jQuery1.4发布:你必须知道的15个新特性中找到。

其他回答

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

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

我认为这是添加div的最佳方法:

要将测试div附加到ID为div_ID的div元素,请执行以下操作:

$("#div_id").append("div name along with id will come here, for example, test");

现在将HTML附加到这个添加的测试div中:

$("#test").append("Your HTML");

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

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

或者,可以使用不同答案中提到的.html()或.add()。

所有这些都对我有用,

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