使用jQuery将div附加到文档的末尾？答案

【问题标题】：Append div to end of document with jQuery?使用jQuery将div附加到文档的末尾？
【发布时间】：2011-07-11 13:40:10
【问题描述】：

我想使用 jQuery 编写一个函数，将 div 附加到网页的末尾。我希望能够在许多不同的页面上使用该功能。

我已经写了以下代码，但是它不起作用：

    $(document).append('<div id="helloDiv"></div>');
    $('#helloDiv').html('hello'); // does nothing
    $('#helloDiv').css('top','100') // throws an error

我该如何解决这个问题？

【问题讨论】：

我认为这是因为您将其直接附加到文档中。尝试将其附加到 $('body')
谢谢大家！这个网站为我节省了很多时间和挫败感！
对于JS，见：How to add content to html body using JS?

标签： javascript jquery dom

【解决方案1】：

附加到document 是没有意义的。改为附加到文档的 body 节点，因为这是所有可见内容所在的位置：

$(document.body).append('<div id="helloDiv"></div>');

【讨论】：

【解决方案2】：

如果您希望它位于body 的末尾，为什么不使用：

$('body').append('<div id="helloDiv"></div>');
$('#helloDiv').html('hello');
$('#helloDiv').css('top', 100);

http://jsfiddle.net/ptuxX/

但是，除非您将 position 设置为 absolute，否则仅 .css('top', 100) 并没有多大作用。

【讨论】：

它应该是 .css('top', 100) 不带引号或 .css('top', '100px')

【解决方案3】：

试试：

$('body').append('<div id="helloDiv"></div>');
$('#helloDiv').html('hello');
$('#helloDiv').css('top', '100');

或者在添加div之前添加内容和css。

var $newdiv = '<div id="helloDiv">hello</div>';
$('body').append($newdiv);

【讨论】：