<p>Right now Facebook wants me to throw this ugly div at the top of my page directly under <code><body></code></p> <pre class="prettyprint"><code><div id="fb-root"></div> </code></pre> <p>I would like to avoid this by instead, appending it via JavaScript.</p> <pre class="prettyprint"><code>.append('<div id="fb-root"></div>'); </code></pre> <p>This places it at the bottom of the page.</p> <pre class="prettyprint"><code></head> <body> <header>test</header> <div id="fb-root"></div> </body> </code></pre> <p>How can I 'append' it to the top?</p> <pre class="prettyprint"><code></head> <body> <div id="fb-root"></div> <header>test</header> </body> </code></pre>

<p>Use <code>prepend</code> method:</p> <pre class="prettyprint"><code>$('body').prepend('<div id="fb-root"></div>'); </code></pre>

Append element to top of body in jQuery

Right now Facebook wants me to throw this ugly div at the top of my page directly under <body>

<div id="fb-root"></div>

I would like to avoid this by instead, appending it via JavaScript.

.append('<div id="fb-root"></div>');

This places it at the bottom of the page.

</head>
<body>
    <header>test</header>
    <div id="fb-root"></div>
</body>

How can I 'append' it to the top?

</head>
<body>
    <div id="fb-root"></div>
    <header>test</header>
</body>

363

asked May 01 '13 21:05

Use prepend method:

$('body').prepend('<div id="fb-root"></div>');

answered Oct 12 '22 22:10

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!