我们知道使用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>
