CODEWITHSUNDEEP
javascriptjqueryruby-on-rails
meow
meow

Reputation: 28164

Appending HTML to end of body using javascript

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?

Upvotes: 16

Views: 23515

Answers (4)

gargAman
gargAman

Reputation: 121

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

Upvotes: -2

Sam
Sam

Reputation: 1

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

and append in the el provided by backbone.js

Upvotes: -1

Luca Filosofi
Luca Filosofi

Reputation: 31173

the easy way with jQuery is:

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

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

obviously you can change #result with body

Upvotes: 0

&#199;ağdaş Tekin
&#199;ağdaş Tekin

Reputation: 16651

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

Upvotes: 15

Related Questions