jQuery 获取文本内容与原生 JS 的异同？

卡卡西最近怎么样

已于 2022-05-03 15:26:16 修改

阅读量1k

点赞数 40

分类专栏： 30天拿下前端必经之路 jQuery 文章标签：前端开发语言 html css3 javascript

于 2022-04-28 15:29:11 首次发布

本文链接：https://blog.csdn.net/weixin_52212950/article/details/124471612

版权

30天拿下前端必经之路 jQuery 专栏收录该内容

22 篇文章 23 订阅

订阅专栏

hello hello，我们学习原生 JS 时已经学习掌握了两种获取和设置文本的办法，大家还记得吗？那就是 innerHTML 与 innerText，对吧，这两个基本原生方法的使用想必大家已经有些混淆了吧？不要慌张！下面我会带大家复习一下这两个方法的。

对于本篇文章，将带大家认识 jQuery 的获取设置文本内容的方法，向 jQuery 的深渊迈步吧！！！

文章目录：

1.3 innerHTML 的设置与获取【原生JS 复习巩固】

1.3.1 innerHTML 对文本内容的获取

1.3.2 innerHTML 对文本内容的设置

2.3 innerText 的设置与获取【原生JS 复习巩固】

1.3.1 innerText 对文本内容的获取

1.3.2 innerText 对文本内容的设置

一：html() 与 innerHTML

html() 是 jQuery 的方法，它等同于 innerHTML，二者均可以识别 HTML 标签，所以打印时会将元素标签一起打印出来

1.1 html() 对于内容的获取

获取我们直接无参数即可，并且内容中的标签也会得到

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

输出结果：

可以看到 html() 将标签也输出了出来

1.2 html() 对于内容的设置

设置的话只需要将参数设置为我们要更改的文本即可

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

输出结果：

可以看到我们的文本内容已经改成了我们想要设置的内容

1.3 innerHTML 的设置与获取【原生JS 复习巩固】

下面我们来复习一下效果等价于 jQuery 的 html() 方法的原生 innerHTML

1.3.1 innerHTML 对文本内容的获取

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

输出结果：

innerHTML 也会将标签打印出来

1.3.2 innerHTML 对文本内容的设置

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

输出结果：

文本内容已经改成了我们想要设置的内容

二：text() 与 innerText

text() 是 jQuery 的方法，它等同于 innerText，二者不会识别 HTML 标签，所以打印时不会将元素标签一起打印出来，与前面二者不同需要注意！！

2.1 text() 对于内容的获取

获取的话我们一样直接无参数即可，注意不同之处在于内容中的 标签不会得到

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

输出结果：

内容被打印了出来，内容中的标签没有被打印出来

2.2 text() 对于内容的设置

设置的话只需要将参数设置为我们要更改的文本即可

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

输出结果：

文本内容被改变为了我们想要设置的值

2.3 innerText 的设置与获取【原生JS 复习巩固】

然后下面我们复习一下效果等价于 jQuery 的 text() 方法的原生 innerText

1.3.1 innerText 对文本内容的获取

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

输出结果：

innerText 不会将标签打出来

1.3.2 innerText 对文本内容的设置

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