如何刷新单个div的内容 [英] How do I refresh the contents of a single div

问题描述

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

I'm implementing a simple web-page, in that page, I have multiple div objects, what I'm trying to do is refresh the contents of a single div based on the user clicking a button or entering text in an input field.

到目前为止，我已经找到了适用于php的在线解决方案，但我实在不了解，有人可以使用javascript或jquery和简单的html为我提供解决方案吗?

So far I've found solutions online that apply to php which I know nothing about to be honest, can somebody provide me with a solution using javascript or jquery and simple html?

推荐答案

如果您不熟悉这一切，最简单的方法是更改​​div的html.给定一个ID为"ponies"的div，您可以通过以下方式更改其内容:

The simplest route if you're new to all of this is to change the html of the div. Given a div with id "ponies", you can change its contents via:

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

如果要将一个div内容换出另一个内容，则可以选择在div之后通过createChild更改DOM树，然后删除div.与修改DOM本身相比，innerHTML方法虽然简单易懂，却有点钝(且缓慢).但是，如果您很少这样做，并且html很简单，谁在乎呢?

If you want to swap out a div contents for another, you can opt instead to alter the DOM tree by a createChild after the div, and then removing the div. The innerHTML approach, while simple to understand, is a bit of a blunt (and slow) tool, compared to modifying the DOM itself. But if you're doing it rarely, and the html is simple, who cares?

如果您有一个用于输入姓名的表单，则可以执行以下操作:

If you have a form input for a forename then you can do:

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

并将呼叫置于按钮的onClick事件中:

And put the call in the button's onClick event:

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

其中forenameinput是姓氏形式输入的ID.要了解有关所有这些东西的更多信息，请访问 w3schools网站.

Where forenameinput is the id of the forename form input. To learn more about all this stuff, look at the w3schools website.

这篇关于如何刷新单个div的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！