jQuery - コンテンツと属性の設定

コンテンツの設定 - text()、html()、val()

コンテンツを設定するために、前の章と同じ3つのメソッドを使用します：

text() - 選択した要素のテキスト・コンテンツを設定または返します
html() - 選択した要素のコンテンツを設定または返します（HTMLのマークアップを含む）
val() - フォーム・フィールドの値を設定または返します

次の例は、jQuery text()、html()、val() メソッドでコンテンツを設定する方法のデモです：

例

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
});

Try it Yourself »

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

上記 3 つの jQuery メソッド全てには、コールバック関数も存在します。コールバック関数には、2 つのパラメータがあります：選択された要素リスト内における現在要素のインデックスとオリジナルの（古い）値。次に、関数から新しい値として使用する文字列を返します（You then return the string you wish to use as the new value from the function）。

次の例は、コールバック関数を使用した text() と html() のデモです:

例

$("#btn1").click(function(){
    $("#test1").text(function(i, origText){
        return "Old text: " + origText + " New text: Hello world!
        (index: " + i + ")";
    });
});

$("#btn2").click(function(){
    $("#test2").html(function(i, origText){
        return "Old html: " + origText + " New html: Hello <b>world!</b>
        (index: " + i + ")";
    });
});

Try it Yourself »

属性の設定 - attr()

jQuery attr() メソッドは、属性値の設定/変更にも使用されます。

次の例は、リンク内の href 属性値を変更（設定）する方法のデモです：

jQuery attr() method is also used to set/change attribute values.

例

$("button").click(function(){
$("#w3s").attr("href", "http://www.w3schools.com/jquery");
});

Try it Yourself »

attr() メソッドは、同時に複数の属性値を設定することもできます。

次の例は、同時に href と title 属性の双方を設定する方法のデモです：

例

$("button").click(function(){
    $("#w3s").attr({
        "href" : "http://www.w3schools.com/jquery",
        "title" : "W3Schools jQuery Tutorial"
    });
});

Try it Yourself »

attr() のコールバック関数

jQuery attr() メソッドには、コールバック関数も存在します。コールバック関数には、2つのパラメータがあります：選択された要素リスト内における現在要素のインデックスとオリジナルの（古い）属性値。次に、関数から新しい値として使用する文字列を返します。

次の例は、コールバック関数を使用した attr() のデモです:

例

$("button").click(function(){
    $("#w3s").attr("href", function(i, origValue){
        return origValue + "/jquery";
    });
});

Try it Yourself »

練習問題で確認テスト！

練習問題 1 » 練習問題 2 » 練習問題 3 » 練習問題 4 » 練習問題 5 »

jQuery HTML リファレンス

すべての jQuery HTML メソッドの完全な概要については、jQuery HTML/CSS リファレンスをご覧ください。

❮ 前章へ次章へ ❯