如何在 jQuery 中创建div 元素？
【问题讨论】：
标签： javascript jquery html append jquery-append
从 jQuery 1.4 开始，您可以将属性传递给自闭合元素，如下所示：
jQuery('<div>', {
id: 'some-id',
class: 'some-class some-other-class',
title: 'now this div has a title!'
}).appendTo('#mySelector');
这里是Docs
可以在 jQuery 1.4 Released: The 15 New Features you Must Know 找到示例。
【讨论】：
您可以使用append（添加到父级的最后一个位置）或prepend（添加到父级的第一个位置）：
$('#parent').append('<div>hello</div>');
// or
$('<div>hello</div>').appendTo('#parent');
或者，您可以使用different answer 中提到的.html() 或.add()。
【讨论】：
从技术上讲，$('<div></div>') 将“创建”一个 div 元素（或更具体地说是一个 DIV DOM 元素），但不会将其添加到您的 HTML 文档中。然后，您需要将它与其他答案结合使用，以实际使用它做任何有用的事情（例如使用 append() 方法等）。
manipulation documentation 为您提供了有关如何添加新元素的所有各种选项。
【讨论】：
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 id="main"></div>添加一个空白的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');
【讨论】：
这是另一种使用 jQuery 创建 div 的技术。
元素克隆
假设您的页面中有一个现有的 div，您想使用 jQuery 克隆它（例如，在表单中多次复制输入）。你可以这样做。
$('#clone_button').click(function() {
$('#clone_wrapper div:first')
.clone()
.append('clone')
.appendTo($('#clone_wrapper'));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clone_wrapper">
<div>
Div
</div>
</div>
<button id="clone_button">Clone me!</button>【讨论】：
创建内存中的 DIV
$("<div/>");
添加点击处理程序、样式等 - 最后插入 DOM 到目标元素选择器中：
$("<div/>", {
// PROPERTIES HERE
text: "Click me",
id: "example",
"class": "myDiv", // ('class' is still better in quotes)
css: {
color: "red",
fontSize: "3em",
cursor: "pointer"
},
on: {
mouseenter: function() {
console.log("PLEASE... "+ $(this).text());
},
click: function() {
console.log("Hy! My ID is: "+ this.id);
}
},
append: "<i>!!</i>",
appendTo: "body" // Finally, append to any selector
}); // << no need to do anything here as we defined the properties internally.<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>与 ian 的回答类似，但我没有找到正确解决 属性对象声明中方法使用的示例，所以你去吧。
【讨论】：
如果你想创建任何 HTML 标签，你可以试试这个 例如
var selectBody = $('body');
var div = $('<div>');
var h1 = $('<h1>');
var p = $('<p>');
如果你想在 flay 上添加任何元素，你可以试试这个
selectBody.append(div);
【讨论】：
<div id="foo"></div>
$('#foo').html('<div></div>');
【讨论】：
如果您使用的是 Jquery > 1.4，则最好使用 Ian's answer。否则，我会使用这种方法：
这与celoron's answer 非常相似，但我不知道他们为什么使用document.createElement 而不是Jquery 表示法。
$("body").append(function(){
return $("<div/>").html("I'm a freshly created div. I also contain some Ps!")
.attr("id","myDivId")
.addClass("myDivClass")
.css("border", "solid")
.append($("<p/>").html("I think, therefore I am."))
.append($("<p/>").html("The die is cast."))
});
//Some style, for better demonstration if you want to try it out. Don't use this approach for actual design and layout!
$("body").append($("<style/>").html("p{background-color:blue;}div{background-color:yellow;}div>p{color:white;}"));
我还认为在这种情况下使用带有回调函数的append() 更具可读性，因为您现在立即将某些内容附加到正文中。但这只是个人喜好问题，就像编写任何代码或文本时一样。
一般来说，在 JQuery 代码中使用尽可能少的 HTML，因为这主要是意大利面条代码。它容易出错且难以维护，因为 HTML-String 很容易包含拼写错误。此外，它将标记语言 (HTML) 与编程语言 (Javascript/Jquery) 混合在一起，这通常是个坏主意。
【讨论】：
或者附加（）
你也可以使用appendTo()，它有不同的语法：
$("#foo").append("<div>hello world</div>");
$("<div>hello world</div>").appendTo("#foo");
【讨论】：
您可以使用.jquery() 方法创建单独的标签。并使用.append() 方法创建子标签。由于 jQuery 支持链接，您还可以通过两种方式应用 CSS。
要么在类中指定它，要么只调用.attr()：
var lTag = jQuery("<li/>")
.appendTo(".div_class").html(data.productDisplayName);
var aHref = jQuery('<a/>',{
}).appendTo(lTag).attr("href", data.mediumImageURL);
jQuery('<img/>',{
}).appendTo(aHref).attr("src", data.mediumImageURL).attr("alt", data.altText);
首先，我将一个列表标记附加到我的 div 标记并将 JSON 数据插入其中。接下来，我正在创建列表的子标签，并提供一些属性。我已经将值分配给了一个变量，这样我就可以很容易地附加它。
我认为这是添加 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");
【讨论】：
我希望对代码有所帮助。 :)（我用）
function generateParameterForm(fieldName, promptText, valueType) {
//<div class="form-group">
//<label for="yyy" class="control-label">XXX</label>
//<input type="text" class="form-control" id="yyy" name="yyy"/>
//</div>
// Add new div tag
var form = $("<div/>").addClass("form-group");
// Add label for prompt text
var label = $("<label/>").attr("for", fieldName).addClass("control-label").text(promptText);
// Add text field
var input = $("<input/>").attr("type", "text").addClass("form-control").addClass(valueType).attr("id", fieldName).attr("name", fieldName);
// lbl and inp => form
$(form).append(label).append(input);
return $(form);
}
【讨论】：
如果只是一个空的div，这就足够了：
$("#foo").append("<div>")
或
$("#foo").append("<div/>")
它给出了相同的结果。
【讨论】：
$(HTMLelement)可以成功。如果您想要一个 epmty div，请将其用作 $('<div></div>');。您也可以通过相同的方法设置其他元素。如果要在创建后更改内部 HTML，可以使用 html() 方法。对于获取 outerHTML 作为字符串，您可以使用如下：
var element = $('<div/>');
var innerHTML = element.html(); // if you want set new HTML use it like this element.html('<b>new HTML</b>');
var outerHTML = element[0].outerHTML;
【讨论】：
您可以使用.add() 创建一个新的 jQuery object 并添加到目标元素。然后使用链接继续进行。
例如jQueryApi：
$( "div" ).css( "border", "2px solid red" )
.add( "p" )
.css( "background", "yellow" ); div {
width: 60px;
height: 60px;
margin: 10px;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>【讨论】：
add() 方法将现有的 DOM 元素添加到现有的 jQuery 对象中。您在上面发布的示例（取自 add() 的 jQuery API 页面）为页面上 6 个现有 DIV 的集合添加了一个红色边框，然后将页面上的“p”元素添加到集合中并翻转所有 7 个背景黄色的。它不会按照 OP 的要求创建任何新的 DOM 元素。恐怕我必须-1这个答案。建议你删除它。
这个怎么样？这里，pElement 指的是你想要这个div 里面的元素（成为它的子元素！:)。
$("pElement").append("<div></div");
您可以轻松地在字符串中的 div 中添加更多内容 - 属性、内容，任您选择。请注意，对于属性值，您需要使用正确的引号。
【讨论】：
我刚刚为此做了一个小jQuery plugin。
它遵循你的语法：
var myDiv = $.create("div");
DOM节点ID可以指定为第二个参数：
var secondItem = $.create("div","item2");
严重吗？不。但是这种语法比 $("") 更好，而且物有所值。
【讨论】：
$("<div>")。