我們知道使用text()和html()方法可以用來操縱HTML元素的內容。
另一個有用的方法是val()方法，它允許我們獲取和設置表單字段的值，例如：
文本框(input)，下拉列表(select)等。
HTML：
<input type="text" id="name" value="your name">
JS：
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ction(){
alert(("#name").val());
});
總結：
以下jQuery方法可用於獲取和設置所選HTML元素的內容和屬性：
text() 設置或返回所選元素的文本內容。
html() 設置或返回所選元素的內容（包括HTML標籤）。
val() 設置或返回表單字段的值。
attr() 設置或返回屬性的值。
removeAttr() 刪除指定的屬性。
添加內容：
正如我們在以前的課程中所看到的，html() 和 text() 方法可以用於獲取和設置所選元素的內容。
然而，這些方法用於設置內容時，現有內容將被覆蓋。
jQuery具有用於向所選元素添加新內容而不刪除現有內容的方法：
append() 在所選元素的末尾插入內容。
prepend() 在所選元素的開頭插入內容。
after() 插入所選元素後的內容。
before() 在所選元素之前插入內容。
以p段落爲例,示意圖:
1.append() 方法在所選HTML元素的末尾插入內容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
</head>
<body>
<p id="demo">Hi </p>
<script>
$(function() {
$("#demo").append("David");
});
//最終輸出 "Hi David"
</script>
</body>
</html>
2.before() 方法在被選元素之前插入指定內容。
after() 方法在被選元素之後插入指定內容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
</head>
<body>
<p id="demo">Hi</p>
<script>
$(function() {
$("#demo").before("<i>Some Title</i>");
$("#demo").after("<b>Welcome</b>");
});
</script>
</body>
</html>
3.append()，prepend()，before() 和 after() 方法也可用於添加新創建的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
</head>
<body>
<p id="demo">Hello</p>
<script>
$(function() {
var txt = $("<p></p>").text("Hi");
$("#demo").after(txt);
});
</script>
</body>
</html>