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?

Answer 1

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

Answer 2

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

and append in the el provided by backbone.js

Answer 3

the easy way with jQuery is:

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

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

obviously you can change #result with body

Answer 4

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>GOD IS GREAT</p>" );