如何刷新单个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>' );
} );