JavaScript笔记-innerHTML与innerText的区别

Green8y0

于 2021-03-12 17:20:55 发布

阅读量93

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/init_8y0/article/details/114700876

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

文章目录

前言
一、区别
二、代码
三、运行结果
总结

前言

JavaScript的学习笔记-innerHTML与innerText的区别

一、区别

属性	描述
innerHTML	将字符串内的html标签当作标签渲染
innerText	将字符串内的html标签当作字符串渲染

二、代码

HTML代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <p class="inner-html"></p>
  <p class="inner-text"></p>

  <script>
    // 获取元素
    let ph = document.querySelector('.inner-html')
    let pt = document.querySelector('.inner-text')

    // 1.innerHTML将html标签当作标签进行渲染
    ph.innerHTML = '<h1>innerHTML</h1>'
    console.log(ph)
    // 2.innerText将html标签作为字符串输出
    pt.innerText = '<h1>innerText</h1>'
    console.log(pt)
  </script>
</body>
</html>