如何刷新單個div的內容

Question

我正在實現一個簡單的網頁，在該頁面中，我有多個div對象，我想要做的是基於用戶單擊按鈕或在輸入字段中輸入文本來刷新單個div的內容。

到目前為止，我已經找到了適用於php的在線解決方案，但我實在不了解，有人可以使用javascript或jquery和簡單的html為我提供解決方案嗎？

Answer 1

如果您不熟悉所有這些，最簡單的方法是更改​​div的html。 給定一個ID為“ ponies”的div，您可以通過以下方式更改其內容：

document.getElementById("ponies").innerHTML = '<p>new html block</p>'

如果要將div內容換成另一個，則可以選擇在div之后由createChild更改DOM樹，然后刪除div。 與修改DOM本身相比， innerHTML方法雖然簡單易懂， innerHTML有點鈍（且緩慢）。 但是，如果您很少這樣做，並且html很簡單，誰在乎呢？

如果您有一個用於輸入姓名的表單，則可以執行以下操作：

function showForename(forenameDiv) {
    var text = "<p>Your forename is " + document.getElementById(forenameDiv).text + "</p>";
    document.getElementById("ponies").innerHTML = text; 
}

並將呼叫放入按鈕的onClick事件中：

<input type="button" value="Who am I?" onclick="showForename('forenameinput')" />

其中forenameinput是姓氏形式輸入的id。 要了解有關所有這些東西的更多信息，請訪問w3schools網站 。

Answer 2

jQuery的示例：

$("input.button").click(function(){
   $('div#content').load('ajax/test.php', function() {
      console.log('loaded.');
   });
});

Answer 3

根據@PhilH的答案，這里提供了一種更清潔的jQuery解決方案：

jQuery( '#yourInput' ).click( function(){
    jQuery( '#ponies' ).text( 'You wrote: ' + this.value );
} );

即使在jQuery中，您也可以輸入純HTML：

jQuery( '#yourInput' ).click( function(){
    jQuery( '#ponies' ).html( '<span>You wrote: <b>' + this.value + '</b></span>' );
} );