- 15天学会jQuery编程与实战（视频教学版） （Web前端技术丛书）
- 刘鑫
- 710字
- 2020-11-28 16:21:45
3.1 获取或设置元素的内容
jQuery中有3个方法用来获取HTML中元素的内容，分别是text()、html()和val()。
● text()：设置或返回所选元素的文本内容。
● html()：设置或返回所选元素的内容（包括HTML标记）。
● val()：设置或返回表单字段的值。
text和html的明显区别是text只返回元素的文本内容，而html返回的是将HTML解析后的内容。val返回的是表单的内容。
【示例3-1】get_set_content.html
01 <body>
02 <p id="test">
03 有3个方法可以用于获取<strong>HTML元素</strong>的内容，分别是：<br/>
04 <strong>text()：设置或返回所选元素的文本内容</strong><br/>
05 <strong>html()：设置或返回所选元素的内容（包括HTML标记）</strong><br/>
06 <strong>val()：设置或返回表单字段的值</strong><br/>
07 </p>
08 <textarea name="textvalue" cols="80" rows="5"></textarea>
09 <div>
10 <button id="btn1">显示文本</button>
11 <button id="btn2">显示HTML</button>
12 </div>
13 </body>
上面的代码在HTML中放置了一个id为test的p元素，在段落内部设置了一些HTML代码，在段落下面添加了一个textarea元素，用于显示文本的btn1和HTML的btn2。接下来对btn1编写代码，使其获取p元素内部的文本内容，并显示到textarea中。btn2将显示HTML内容到textarea元素。这两个按钮的事件处理实现如下：
01 <script type="text/javascript">
02 $(document).ready(function(e) {
03 $("#btn1").click(function(e) {
04 var textStr=$("p").text(); //获取段落的文本内容
05 $("#textvalue").text(textStr); //在textarea中显示文本内容
06 });
07 $("#btn2").click(function(e) {
08 var htmlStr=$("#test").html(); //获取段落的HTM内容
09 $("#textvalue").text(htmlStr); //在textarea中显示HTML内容
10 });
11 });
在上面的代码中，按钮btn1用于使用text获取段落的文本内容并显示到textarea中，显示效果如图3.1所示。
图3.1 显示文本内容
可以见到，即便段落标记内部包含HTML字符串，但是text()只是取出其中的文本内容。在为textarea赋值时，使用带参数的text函数，这个参数将作为文本内容设置给textarea，因此在textarea中显示HTML文本内容。
btn2按钮使用html()方法获取HTML格式的内容，输出结果如图3.2所示。
图3.2 显示HTML内容
html()方法显示段落标签中的HTML元素，可以看到它包含HTML标记。同样，如果为html()方法带一个参数，表示将为指定的目标元素设置HTML内容，比如可以编写如下代码：
$("#test2").html(htmlStr); //将HTML内容设置到id为test2的div中
这就使得HTML代码的设置给了名为test2的div，这样就可以动态地为div添加新的HTML内容。