题 在jQuery中创建div元素[重复]


这个问题在这里已有答案:

我如何创建一个 div 元素 jQuery的


1364
2018-05-15 10:30


起源


看到: 使用jQuery创建HTML元素的最有效方法是什么? - falsarella
$(使用document.createElement( 'DIV')) - Yami Odymel


答案:


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

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

或者,您可以使用 .html() 要么 .add() 如提到的那样 不同的答案


942
2018-05-15 10:43



不会id需要单引号而不是双引号?所以id =“bar”将是id ='bar',否则你将关闭它。 - Ricki
@Ricki - 不,对所有属性使用双引号。单引号不会产生有效的XHTML,尽管大多数浏览器都会容忍它。 - halfer
@halfer反之亦然,在javascript中使用单引号用于选择器和任何带双引号的附加html。 - Ricki
不不不!这个例子(以及关于下面引用的整个毫无意义的讨论)说明了什么 不 去做。 jQuery提供属性访问器和text()函数是有原因的:这是因为它们负责正确引用和转义属性和文本。只要用它们, 总是。 @ ian的回答在这方面要好得多。 - Tibo
@halfer就我所知,这是一个完整的神话(尽管是一个流行的神话),并且属性的单引号实际上在HTML,XML和XHTML中完全有效。看到 stackoverflow.com/questions/2210430/... - Mark Amery


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

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

在这里 文件

可以在以下位置找到示例 jQuery 1.4发布:你必须知道的15个新功能


1869
2017-11-11 19:01



你可以在文档中阅读它 api.jquery.com/jQuery/#jQuery2 (最后一段) - Gabriele Petrioli
这是一个很好的解决方案,非常理想,因为您可以在进行侵入式DOM修改之前为其提供一些属性。 - knowncitizen
@knowncitizen,但这也与全部内联编写相同。例如 $('<div id="foo" class="bar">text</div>').appendTo('body'); 等等 - trusktr
我希望这在ie7 + 8中有效:/ / - Johan
如果你想用动态生成的div动态生成一个类名,你可能需要在类中放置单引号,以便在IE7和IE8中工作 - 例如'class':'my-class-名称' - blackhawk


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

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


218
2018-05-15 10:49



你如何给你的新div一个新的身份?并说id必须是动态的?即'<div id ='+ myNewId +'> </ div>' - topwik
使用.attr()方法。 - samjudson
或者prop()方法也许...... - samjudson


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();
});

183
2017-08-07 22:08



@JRM为什么这比伊恩的回答更好? - Alexander Suraphel
这是更好的,对不起最好的答案,因为它解释了一切,而且一目了然,一目了然也可以理解。 :d - Sony Mathew
不,它没有 - 它甚至不使用jQuery来实际创建元素。这可能是一个答案,但这不是这个问题的答案,“我如何在jQuery中创建div元素?”这不是使用jQuery创建div,而是使用标准JavaScript创建的DIV。这个答案会抛出其他内容,例如点击处理程序,混合中的动画。 ian上面的回答是正确的,尽管选择的那个在技术上也是正确的。这个应该被评为完全偏离主题。 - Carnix
根据 这个答案 运用 $(document.createElement("div")) 代替 $("<div>") 更快,但产生类似的jQuery元素,同时仍然可读。 - luckydonald
这是一种不同的方法,看起来很干净。添加动画的原因尚不清楚,但通过示例,它似乎显示了如何创建丰富的元素。我想知道在这些不同的方法之间读取DOM结构意味着什么 - 我敢打赌它们会导致不同的渲染后果,我知道使用jQuery添加和删除元素会导致渲染错误,例如,但是当时我没有'我知道如何正确使用.createElement。 - Olivier Butler


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

71
2018-05-15 10:36





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

将附加一个空白div <div id="main"></div>


60
2018-05-15 10:34





所有这些对我有用,

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>

51
2018-01-28 04:41





创建div的一个简短方法是

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

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


49
2018-02-25 03:46