Appending HTML to end of body using javascript

Question

I have several templates for faceboxes (lightbox) that I need at different points of the application. These are stored in different partials and files.

I will initialize different javascript functions in accordance to which ones I need. The question is, what is the best way to append the external HTML page into my body using javascript?

score 15 · Answer 1 · answered Mar 21 '10 at 21:23

15

Since you tagged the question with it, here's a jQuery solution.

$("body").append("text");

Remember that the parameter can also be a DOM element. So you can do this :

var p = $("<p/>").text("a paragraph");
$("body").append(p);

answered Mar 21 '10 at 21:23

Çağdaş Tekin

16,592
4
49
58

score 0 · Answer 2 · answered Mar 22 '10 at 02:26

0

the easy way with jQuery is:

$('#result').load('test.html');

<div id="result"><!--/ Hold My Data! /--></div>

obviously you can change #result with body

answered Mar 22 '10 at 02:26

Luca Filosofi

30,905
9
70
77

thanks! this was super helpful. any idea how this can be done in in rails? it is often a partial (_partial.html.erb), which cannot be called as ("/partial") – meow Mar 22 '10 at 03:31
If you want to load those partials dynamically with js, you'll have to expose each of them with a route. Replace `test.html` with `/path/to/my/action/to/render_partial`. Alternately, if you know you'll need them, render the partials into the view and hide them with `display:none;` until you use them in your facebox. – Jonathan Julian Mar 23 '10 at 03:01
Read This http://stackoverflow.com/questions/2229811/load-partial-with-jquery-and-rails AND this http://stackoverflow.com/questions/2484958/rails-ajax-jquery-problem – Luca Filosofi Mar 28 '10 at 11:01

score -1 · Answer 3 · answered Dec 24 '13 at 12:20

-1

Also you can try some templates library.. Like handlebar and underscore..

and append in the el provided by backbone.js

answered Dec 24 '13 at 12:20

Sam

1
1

score -2 · Answer 4 · edited Sep 05 '22 at 13:19

Suppose you want to append this html in your template, then you can use the below code according to your application Consider the code

Example 1:

rowData += '<div style="width: 130px;">'+param1+'</div>';
rowData += '<div style="width: 130px;">'+param2+'</div>';
$('#ID').html(rowData);

and please make sure that the js should be include in that file. Here is the information of variable used above:

row data - the html that you want to append,

param- if you want to show the value of java script variable on browser dynamically,

#ID- ID of the div in which you want to append this html

example 2: Consider the following HTML:

<h2>Hello World</h2>
<div class="user">
  <div class="inner">Hi</div>
  <div class="inner">Bye</div>
</div>

You can create content and insert it into several elements at once:

$( ".inner" ).append( "<p>Lorem Ipsum</p>" );

Appending HTML to end of body using javascript

4 Answers4