您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

jQuery html()和text()方法的区别

时间:03-07来源:作者:点击数:

在 jQuery 中,我们可以使用 text() 方法来获取和设置一个元素的“文本内容”。

语法:

$().text()             //获取文本内容
$().text("文本内容")    //设置文本内容

text() 方法和 innerText 属性的效果是一样的,只不过 text() 是 jQuery 中的实现方式,而 innerText 是 JavaScript 中的实现方式。

举例:html() 与 text() 比较

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var strHtml = $("p").html();
            var strText = $("p").text();

            $("#txt1").val(strHtml);
            $("#txt2").val(strText);
        })
    </script>
</head>
<body>
    <p><strong style="color:hotpink">城东书院</strong></p>
    html()是:<input id="txt1" type="text" /><br/>
    text()是:<input id="txt2" type="text" />
</body>
</html>

预览效果如图 1 所示。

html()和text()效果的区别
图 1:html() 和 text() 效果的区别

从这个例子可以看出,html() 获取的是元素内部所有的内容,而 text() 获取的仅仅是文本内容。此外,val() 方法用于获取和设置表单元素的 value 值,我们在后面会详细介绍。

对于 html() 和 text() 这两个方法的区别,从表 1 就可以很清晰地比较出来。

表 1:html() 和 text() 的区别
HTML代码 html() text()
<div>城东书院</div> 城东书院 城东书院
<div><em> 城东书院 </em></div> <em>城东书院</em> 城东书院
<div><em></em></div> <em></em> (空字符串)
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门