jqueryのテキスト値設定例(テキストボックスDIV形式の値を設定)_jquery

jquery 設定コンテンツ - text()、html()、および val()

前の章と同じ 3 つのメソッドを使用してコンテンツを設定します。

text() - 選択した要素のテキスト コンテンツを設定または返します。
html() - 選択した要素 (HTML タグを含む) のコンテンツを設定または返します。
val() - の値を設定または返します。フォームフィールド

次の例は、text()、html()、および val() メソッドを通じてコン​​テンツを設定する方法を示しています。

例

コードをコピー コードは次のとおりです:

$("#btn1 ").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function( ){
$("#test2").html("Hello world!");
});
$("#btn3").click( function() {
$("#test3").val("ドリーダック");
});

text()、html()、val()のコールバック関数

上記の 3 つの jQuery メソッド、text()、html()、および val() にもコールバック関数があります。コールバック関数は、選択された要素リスト内の現在の要素のインデックスと元の (古い) 値の 2 つのパラメータを取ります。次に、関数の新しい値として使用する文字列を返します。

次の例は、コールバック関数を使用した text() と html() を示しています。

例

コードをコピー コードは次のとおりです:

$("#btn1 ").click(function(){

$("#test1").text(function(i,origText){
return "古いテキスト: " origText " 新しいテキスト: Hello world!
(インデックス: " i ")";
});
});

$("#btn2").click(function(){$("#test2").html(function(i,origText){

return "古い html: " origText " 新しい html : Hello world!
(index: " i ")";
});
});