使用jQuery将div添加到文档末尾？

Question

我想使用jQuery编写一个函数，在网页的末尾添加一个 div。我希望能在许多不同的页面上使用此函数。

我编写了以下代码，但它不起作用：

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

我该如何修复这个问题？

- Vivian River

---

我认为这是因为你直接将它附加到文档上了。尝试将其附加到$('body')上。 - HumanCatfood

谢谢大家！这个网站为我节省了很多时间和烦恼！ - Vivian River

对于JS，请参见：如何使用JS向HTML body添加内容？ - kenorb

Answer 1

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

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

- lonesomeday

Answer 2

如果您想将其放置在 body 的末尾，为什么不使用以下代码：

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

http://jsfiddle.net/ptuxX/

然而，仅使用.css('top', 100)并没有太大的作用，除非您将position设置为absolute。

- pimvdb

---

应该是.css('top', 100)，不需要引号，也不需要.css('top', '100px')。 - Jayne Mast

Answer 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);

- Jules