如何將外部html添加到div中

Question

我有一個HTML文件index.HTML。我想加載外部文件（1.HTML，2.HTML，3.HTML）插入按鈕，一個div單擊 我的HTML是這樣的

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

<div class="mydiv"> 

</div> 

上的按鈕1 1.HTML內容請點擊

在被加載高於div。 點擊button2，2.HTML ..等

我對java腳本很新，所以讓我知道如何爲此編寫腳本。 任何幫助，將不勝感激。 由於事先

Answer 1

您可能需要使用jQuery load()

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

Answer 2

你只需要後

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

Answer 3

使用load()追加HTML ..和數據attirbutes .. 試試這個

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

注：選擇$('button')選擇文檔中的所有在場的按鈕..所以它的更好，你給他們一個類，並選擇它使用類選擇要具體.

更具體

$('.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 4

試試這個

$(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>