1つのdivの内容を更新するには

Question

私は単純なWebページを実装しています。そのページには、複数のdivオブジェクトがあります。私がしようとしているのは、ユーザーがボタンをクリックするか、入力フィールドにテキストを入力します。

これまでのところ、私は正直で何も知らないPHPに適用されるソリューションをオンラインで見つけました。誰かがjavascriptまたはjqueryと単純なhtmlを使用してソリューションを提供できますか？

Answer 1

最も簡単なルートあなたはこのすべてに新しいしている場合のdivのHTMLを変更することです。あなたが別のためのdivの内容を交換する場合は、後にcreateChildでDOMツリーを変更する代わりに選ぶことができます

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

：ID「ポニー」とdiv要素を考えると、あなたは経由して、その内容を変更することができますdivを削除してdivを削除します。 innerHTMLアプローチは、わかりやすく、DOM自体を変更するのと比べて、少し鈍い（遅い）ツールです。しかし、あなたがそれをめったにやっていないのであれば、htmlは単純ですが、誰が気にしますか？

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

forenameinputがforenameのIDです：

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

を、ボタンのonClickイベントでコールを置く：あなたはforenameためのフォーム入力を持っている場合は

あなたが行うことができますフォーム入力。これらのすべての詳細については、w3schools websiteをご覧ください。ここ@PhilHの答えクリーナーjQueryのソリューションに基づいて

Answer 2

jQueryを使っ例：

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

Answer 3

：あなたがしたい場合

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