定义

针对API属性进行分类

HTML DOM 属性	JQuery API
innerHTML	text()
outerHTML	html()
innerText	val()
outerText

innerHTML设置或获取位于对象起始和结束标签内的 HTML

outerHTML设置或获取对象及其内容的 HTML 形式

innerText 设置或获取位于对象起始和结束标签内的文本

outerText 设置(包括标签)或获取(不包括标签)对象的文本

html() 方法返回或设置被选元素的内容 (inner HTML);返回值时反正匹配的第一，设置时设置所有

text() 方法方法设置或返回被选元素的文本内容；当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）

val()方法返回或设置被选元素的值；多用于input框、select框

示例

1、innerHTML、 OuterHTML、innerText、OuterText

① 获取


<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>

    <div id="text">
        隶属于div标签中的文字
        <span>
            隶属于span标签中的文字
        </span>
    </div>

</body>

</html>
<script type="text/javascript">

var textId = document.getElementById('text');

console.log(textId.innerHTML);
console.log(textId.outerHTML);
console.log(textId.innerText);
console.log(textId.outerText);

</script>

输出结果

②设置

<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>demo</title>
</head>

<body>

    <ul>
        <li id="text_1"  onclick="innerHTMLSet()">innerHTML设置效果</li>
        <li id="text_2"  onclick="outerHTMLSet()">outerHTML设置效果</li>
        <li id="text_3"  onclick="inneTextSet()">innerText设置效果</li>
        <li id="text_4"  onclick="outerTextSet()">outerText设置效果</li>
    </ul>

</body>

</html>
<script type="text/javascript">
    var text = '<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>';
    function innerHTMLSet() {
        document.getElementById('text_1').innerHTML = text;
    }
    function outerHTMLSet() {
        document.getElementById('text_2').outerHTML = text;
    }
    function inneTextSet() {
        document.getElementById('text_3').innerText = text;
    }
    function outerTextSet() {
        document.getElementById('text_4').outerText = text;
    }

</script>

点击之后

查看DOM

在IE10、Chrome 66表现一致；Firefox 58 下不支持outerText()方法。

2、html()、text()、val()

① 获取

<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>demo</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>

<body>
    <div id="text">
        隶属于div标签中的文字
        <span>
            隶属于span标签中的文字
        </span>
    </div>
    <input id="input" type='text' value="你好">
</body>

</html>
<script type="text/javascript">
    console.log($("#text").html());
    console.log($("#text").text());
    console.log($("#input").val());
</script>

输出结果

②设置

<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>demo</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>

<body>

    <ul>
        <li id="text_1">html()设置效果</li>
        <li id="text_2">text()设置效果</li>
    </ul>
    <input id="text_3" value="before click"> val()设置效果

</body>

</html>
<script type="text/javascript">
    var text = '<font size=9pt color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>';
    $("#text_1").on('click', function(event) {
        $(this).html(text);

    });
    $("#text_2").on('click', function(event) {
        $(this).text(text);
    });
    $("#text_3").on('click', function(event) {
        $(this).val('after click');
    });
</script>