Jqueryでノードの内容を取得するhtml、text、valの比較

ここ数日、点ajaxを学んでJqueryの中でノードのテキストの内容の関数html()を取得して、text()とval()の用途の違いは少し混乱して、いっそ書いてついでに勉強します:比較のためにわざわざ少しコードのテストを書きました:

<input type="button" id="button" value="  ">br>
<input type="text" id="text">
<div id="div">
<div>1div>
<div>2div>
<div>3div>
div>

$(document).ready(function(){
    var button=$("#button");
    button.click(function(){
        alert("VAL  ："+button.val());
        alert("HTML  ："+button.html());
        alert("TEXT  ："+button.text());
    });
    var input=$("#text");
    input.keyup(function(event){
        var myEvent=event||window.event;
        var keyCode=myEvent.keyCode;
        if(keyCode==13){
        alert("VAL      ："+input.val());
        alert("HTML      ："+input.html());
        alert("TEXT      ："+input.text());
        }
    });
    var div=$("#div");
    div.click(function(){
        alert("DIV(VAL)     ："+div.val());
        alert("DIV(HTML)     ："+div.html());
        alert("DIV(TEXT)     ："+div.text());

    });
});

実行結果順(図が多いので貼らない):ボタン:VALヒント:HTMLヒントをクリック:TEXTヒント:テキストボックス:VALテキストボックス内容:a HTMLテキストボックス内容:TEXTテキストボックス内容:Div要素:DIV(VAL)テキスト内容:DIV(HTML)テキスト内容:

                            
1
                            
2
                            
3

DIV(TEXT)テキスト内容:1 2 3
val():button inputに対してテキスト値を取得できることがわかります.資料を調べたところval()は主にselectなどのフォーム要素に適用されていることが分かった.html():要素のすべてのノードとテキストの内容が表示されます.text():要素のすべての要素のテキスト内容のみが表示されます.
同様に、上記の3つの関数で、あるノードにテキストの内容やノードを設定することができます.