本篇介紹text()、html() 以及 val()的用法和區別

• text() - 設定或返回所選元素的文字內容
• html() - 設定或返回所選元素的內容（包括 HTML 標記）
• val() - 設定或返回表單欄位的值

 先說三個函式無參獲取內容用法

用白話說3者的區別是:

• html獲取內容時如果有子元素就會以文字把<xx>也輸出
• text會跳過內容中的子元素等標籤,只提取其中的內容
• val是屬性，只有有該屬性的物件才能呼叫(表單元素)

<script src="jquery.js"></script>
<div id="div1">
    div1的文字內容
    <span>div中的span內容</span>
</div>
<input type="text" id="input1" value="這是一個input標籤">
<script>
    console.log($("#div1").text());
    console.log($("#div1").html());
    console.log($("#input1").val());
</script>
 

可以看到html和text都會獲取孩子(孩子的孩子的孩子....)中的內容,

其中text會忽略標籤只獲取文字,

html則把元素中所有的內容當作文字即使時標籤

再說三個函式來設定內容

設定內容的時候我總感覺是和獲取的時候相反,

獲取時html不識別標籤, text識別並跳過,  而設定時是html識別標籤可以增加標籤, text不識別會被當作文字

• html就是你可以新增像<a></a>、<p></p>等標記
• text只能寫文字如果寫了上面的標記則會以文字形式輸出
• val是屬性，只有有該屬性的物件才能呼叫(表單元素)

<script src="jquery.js"></script>
<div id="div1">

</div>
<script>
    $("#div1").html("<span>我是span的文字</span>");
</script>

可以看到上邊html()成功添加了一個span子元素,我們再試試text能不能成功

<script src="jquery.js"></script>
<div id="div1">

</div>
<script>
    $("#div1").text("<span>我是span的文字</span>");
</script>
 

可以看到<span>標籤被當作文字了, 右圖的<span>是黑色的, 不是子元素

再試試設定val

<script src="jquery.js"></script>

    <input type="text" id="input1" value="這是一個input標籤">

<script>
    $("#input1").val("我是value");
</script>

修改成功!