如何在jQuery中创建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 id="foo"></div>

$('#foo').html('<div></div>');

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

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

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

这个怎么样?这里,pElement指的是您希望该div位于其中的元素(作为!:的子元素)。

$("pElement").append("<div></div");

您可以很容易地在字符串中向该div添加更多内容-属性,内容,您可以命名它。请注意,对于属性值,您需要使用正确的引号。

如果它只是一个空div,这就足够了:

$("#foo").append("<div>")

or

$("#foo").append("<div/>")

它给出了相同的结果。

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

将在<div id=“main”></div>中追加一个空白div