javascript - How to add external html into a div -

i have html file index.html. wanna load external files( 1.html, 2.html, 3.html) div on button click html 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 loaded in above div. on click of button2, 2.html.. , etc.

i new java script let me know how write script this. appreciated. in advance

use load().. , 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: selector $('button') selects button present in document.. better give them class , select specific using class selector .

to 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')); });