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

Answer 1

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

Answer 2

您可能需要使用jQuery load（）

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

Answer 3

您只需要在后面附加html

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

Answer 4

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>