How to add external html into a div

Question

i have a HTML file index.HTML. i wanna load external files( 1.HTML, 2.HTML, 3.HTML) into a div on button click my HTML is something like this

<div class="buttons">
<button  type="button">button1</button>
<button  type="button">button2</button>
<button  type="button">button3</button>
</div>

<div class="mydiv">

</div>

on click of button1 1.HTML content to be loaded in above div. on click of button2, 2.HTML.. and etc.

i am very new to java script so let me know how to write a script for this. Any help would be appreciated. thanks in advance

possible duplicate of [What are the new frames?](http://stackoverflow.com/questions/9466265/what-are-the-new-frames) — Quentin, Apr 09 '13 at 09:24

bipen · Answer 1 · 2013-04-10T04:39:47.773

use load().. and data attirbutes .. try this

html

<div class="buttons">
<button  type="button" data-url="1.html">button1</button>
<button  type="button" data-url="2.html">button2</button>
<button  type="button" data-url="3.html">button3</button>
</div>

jquery

$("button").click(function(){
    $('.mydiv').load($(this).data('url'));
});

NOTE: the selector $('button') selects all the button present in the document.. so its better you give them a class and select it to be specific using class selector .

to be more specific

$('.buttons > button').click(function(){
     $('.mydiv').load($(this).data('url'));
});

OR

<div class="buttons">
<button  type="button" data-url="1.html" class="btnclass">button1</button>
<button  type="button" data-url="2.html" class="btnclass">button2</button>
<button  type="button" data-url="3.html" class="btnclass">button3</button>
</div>

$(".btnclass").click(function(){
    $('.mydiv').load($(this).data('url'));
});

`.buttons > button` is quite enough. (I don't like to create new classes where's no need to.) — Roko C. Buljan, Apr 10 '13 at 02:05

score 0 · Answer 2 · answered Apr 09 '13 at 09:25

0

You may need to use jQuery load()

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

answered Apr 09 '13 at 09:25

Adil

146,340
25
209
204

score 0 · Answer 3 · answered Apr 09 '13 at 09:26

0

you just need to append html after

$('#').append('html content')

answered Apr 09 '13 at 09:26

lioncin

145
1
1
7

Read the question clearly. It is not about adding html content. It is about loading external html file. – arulmr Apr 09 '13 at 09:32

score 0 · Answer 4 · answered Apr 09 '13 at 09:29

try this

 $(document).ready(function(){
    $("button").click(function(){
  var file = $(this).attr('number')+'.html';
  $('.mydiv').load(file);
  })
})
<div class="buttons">
<button  number= '1'  type="button">button1</button>
<button  number= '2'  type="button">button2</button>
<button  number= '3'  type="button" >button3</button>
</div>

<div class="mydiv">

</div>

How to add external html into a div

4 Answers4