Question

我正在实现一个简单的网页，在该页面中，我有多个div对象，我要做的是根据用户单击按钮或在文本中输入文本来刷新单个div的内容输入字段。

到目前为止，我已经找到了适用于php的在线解决方案，我对此一无所知，有人可以使用javascript或jquery和简单的html为我提供解决方案吗？

Answer 1

如果您对所有这些都不熟悉，最简单的方法是更改div的html。给定一个带有id＆＃34; ponies＆＃34;的div，您可以通过以下方式更改其内容：

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

如果要将div内容替换为另一个div，则可以选择在div之后用createChild更改DOM树，然后删除div。与修改DOM本身相比，innerHTML方法虽然简单易懂，但却是一种生硬（和慢速）工具。但是，如果你很少这样做，并且html很简单，谁在乎呢？

如果你有一个forename的表单输入，那么你可以这样做：

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是forename表单输入的id。要了解有关所有这些内容的更多信息，请查看w3schools website。

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

如何刷新单个div的内容

3 个答案: