hello hello，我們學(xué)習(xí)原生 JS 時(shí)已經(jīng)學(xué)習(xí)掌握了兩種獲取和設(shè)置文本的辦法，大家還記得嗎？那就是 innerHTML 與 innerText，對(duì)吧，這兩個(gè)基本原生方法的使用想必大家已經(jīng)有些混淆了吧？不要慌張！下面我會(huì)帶大家復(fù)習(xí)一下這兩個(gè)方法的。

對(duì)于本篇文章，將帶大家認(rèn)識(shí) jQuery 的獲取設(shè)置文本內(nèi)容的方法，向 jQuery 的深淵邁步吧?。?！

一：html() 與 innerHTML

html() 是 jQuery 的方法，它等同于 innerHTML，二者均可以識(shí)別 HTML 標(biāo)簽，所以打印時(shí)會(huì)將元素標(biāo)簽一起打印出來

1.1 html() 對(duì)于內(nèi)容的獲取

獲取我們直接無參數(shù)即可，并且內(nèi)容中的標(biāo)簽也會(huì)得到

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        console.log($('div').html());
    </script>
</body>

輸出結(jié)果：

可以看到 html() 將標(biāo)簽也輸出了出來

1.2 html() 對(duì)于內(nèi)容的設(shè)置

設(shè)置的話只需要將參數(shù)設(shè)置為我們要更改的文本即可

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        $('div').html('1234567890');
    </script>
</body>

輸出結(jié)果：

可以看到我們的文本內(nèi)容已經(jīng)改成了我們想要設(shè)置的內(nèi)容

1.3 innerHTML 的設(shè)置與獲取【原生JS 復(fù)習(xí)鞏固】

下面我們來復(fù)習(xí)一下效果等價(jià)于 jQuery 的 html() 方法的原生 innerHTML

1.3.1 innerHTML 對(duì)文本內(nèi)容的獲取

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        var ele=document.querySelector('div')
       console.log(ele.innerHTML);
    </script>
</body>

輸出結(jié)果：

innerHTML 也會(huì)將標(biāo)簽打印出來

1.3.2 innerHTML 對(duì)文本內(nèi)容的設(shè)置

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        var ele=document.querySelector('div')
        ele.innerHTML='123456'
    </script>
</body>

輸出結(jié)果：

文本內(nèi)容已經(jīng)改成了我們想要設(shè)置的內(nèi)容

二：text() 與 innerText

text() 是 jQuery 的方法，它等同于 innerText，二者不會(huì)識(shí)別 HTML 標(biāo)簽，所以打印時(shí)不會(huì)將元素標(biāo)簽一起打印出來，與前面二者不同需要注意！！

2.1 text() 對(duì)于內(nèi)容的獲取

獲取的話我們一樣直接無參數(shù)即可，注意不同之處在于內(nèi)容中的 標(biāo)簽不會(huì)得到

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        console.log($('div').text());
    </script>
</body>

輸出結(jié)果：

內(nèi)容被打印了出來，內(nèi)容中的標(biāo)簽沒有被打印出來

2.2 text() 對(duì)于內(nèi)容的設(shè)置

設(shè)置的話只需要將參數(shù)設(shè)置為我們要更改的文本即可

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        $('div').text('1234');
    </script>
</body>

輸出結(jié)果：

文本內(nèi)容被改變?yōu)榱宋覀兿胍O(shè)置的值

2.3 innerText 的設(shè)置與獲取【原生JS 復(fù)習(xí)鞏固】

然后下面我們復(fù)習(xí)一下效果等價(jià)于 jQuery 的 text() 方法的原生 innerText

2.3.1 innerText 對(duì)文本內(nèi)容的獲取

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        var ele=document.querySelector('div')
        console.log(ele.innerText);
    </script>
</body>

輸出結(jié)果：

innerText 不會(huì)將標(biāo)簽打出來

2.3.2 innerText 對(duì)文本內(nèi)容的設(shè)置

<body>
    <div>
        <p>我是一段文本</p>
    </div>
    <script>
        var ele=document.querySelector('div')
        ele.innerText='123';
    </script>
</body>

輸出結(jié)果：

內(nèi)容被改為了想要設(shè)置的值