我正在實現一個簡單的網頁,在該頁面中,我有多個div對象,我試圖做的是刷新一個div的內容,基於用戶單擊按鈕或在輸入字段中輸入文本。如何刷新一個div的內容
到目前爲止,我已經找到了適用於php的解決方案,我對此一無所知,有人可以爲我提供使用javascript或jquery和簡單html的解決方案嗎?
我正在實現一個簡單的網頁,在該頁面中,我有多個div對象,我試圖做的是刷新一個div的內容,基於用戶單擊按鈕或在輸入字段中輸入文本。如何刷新一個div的內容
到目前爲止,我已經找到了適用於php的解決方案,我對此一無所知,有人可以爲我提供使用javascript或jquery和簡單html的解決方案嗎?
,如果你是新來的這一切的最簡單的途徑是改變div的HTML。由於ID爲「小馬」一個div,你可以通過改變它的內容:
document.getElementById("ponies").innerHTML = '<p>new html block</p>'
如果你想換出另一個DIV的內容,你可以選擇,而不是由createChild
之後修改DOM樹div,然後刪除div。與修改DOM本身相比,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 website。
我想我喜歡這裏的想法,現在又有2個問題了:(1)如何在新的html中輸入變量以嵌入用戶的輸入和(2)我習慣於OOP,那麼如何應用該代碼到按鈕的點擊事件?在此先感謝 – KamalSalem 2011-12-29 12:36:17
這取決於你想要做什麼,我已經添加了一些簡單情況的細節。 – 2011-12-29 14:43:03
使用jQuery的例子:
$("input.button").click(function(){
$('div#content').load('ajax/test.php', function() {
console.log('loaded.');
});
});
基於@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>');
});
那你試試這麼遠嗎? – 2011-12-29 12:31:24
你打算以某種方式存儲信息,或者你只是想基於某些用戶輸入來操縱DOM?如果您打算存儲這些信息,則必須查看某種服務器端代碼,例如PHP,ASP.Net或類似代碼。 – 2011-12-29 12:32:26
這應該是可能的,但您可能會根據頁面的結構更充實一些問題。有一個文本框的網頁或是每個div一個文本框? – martincarlin87 2011-12-29 12:33:04