Append div to end of document with jQuery?

Question

I would like to write a function using jQuery to append a div to the end of a web page. I would like to be able to use the function on many different pages.

I've written the following code, but it doesn't work:

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

How do I fix this?

I think it's because you're appending it directly to the document. Try appending it to $('body') — HumanCatfood, Jul 11 '11 at 13:46
Thanks guys! This site saves me so much time and frustration! — Vivian River, Jul 11 '11 at 14:43
For JS, see: [How to add content to html body using JS?](https://stackoverflow.com/q/13495010/55075) — kenorb, Aug 03 '17 at 11:31

score 50 · Accepted Answer · answered Jul 11 '11 at 13:42

50

It is meaningless to append to the document. Append to the document's body node instead, since this is where all the visible content is:

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

answered Jul 11 '11 at 13:42

lonesomeday

233,373
50
316
318

pimvdb · Answer 2 · 2011-07-11T13:53:11.737

9

If you want it to be at the end of the body, why not use:

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

http://jsfiddle.net/ptuxX/

However, just .css('top', 100) does not do much unless you set the position to absolute.

edited Jul 11 '11 at 13:53

answered Jul 11 '11 at 13:42

pimvdb

151,816
78
307
352

2

and it should be .css('top', 100) without quotes or .css('top', '100px') – Jayne Mast Jul 11 '11 at 13:51

score 0 · Answer 3 · answered Jul 11 '11 at 13:44

Try:

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

Or just add the content and it's css before adding the div.

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

Append div to end of document with jQuery?

3 Answers3

Linked