06-innerText和innerHTML的区别

最新推荐文章于 2022-06-05 09:10:03 发布

陀陀吖

最新推荐文章于 2022-06-05 09:10:03 发布

阅读量126

点赞数

分类专栏： javascript之webAPI

本文链接：https://blog.csdn.net/weixin_40422393/article/details/90913779

版权

javascript之webAPI 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    div{
      width: 300px;
      height: 200px;
      border: 2px dotted red;
    }
  </style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="显示效果获取" id="btn2"/>
<div id="dv">
  这是div
<p>这是一个p</p>
</div>
<script src="common.js"></script>
<script>

  //总结:如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
  //总结:innerHTML是可以设置文本内容
  //总结:innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的

  //总结:想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML


  //获取的时候:
  //innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.---获取不到标签的,文本可以获取
  //innerHTML才是真正的获取标签中间的所有内容


  my$("btn").onclick=function () {
    //my$("dv").innerText="哈哈";//设置文本
    //my$("dv").innerText="<p>这是一个p</p>";//设置html标签的代码

    //my$("dv").innerHTML="哈哈";
    //my$("dv").innerHTML="<p>这是一个p</p>";//设置Html标签的
  };

  //获取
  my$("btn2").onclick=function () {
    //可以获取标签中的文本内容
    //console.log(my$("dv").innerText);
    console.log(my$("dv").innerHTML);
  };

  //结论:
  //如果想要(获取)标签及内容,使用innerHTML
  //如果想要设置标签,使用innerHTML
  //想要设置文本,用innerText,或者innerHTML,或者textContent



  //兼容代码

  //设置任意的标签中间的任意文本内容     兼容解决
  function setInnerText(element,text) {
    //判断浏览器是否支持这个属性
    if(typeof element.textContent =="undefined"){//不支持
      element.innerText=text;
    }else{//支持这个属性
      element.textContent=text;
    }
  }

  //获取任意标签中间的文本内容   兼容解决
  function getInnerText(element) {
    if(typeof element.textContent=="undefined"){
     return element.innerText;
    }else{
      return element.textContent;
    }
  }

</script>
</body>
</html>

陀陀吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06-innerText和innerHTML的区别

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> div{ width: 300px; height: 200px; border: 2...
复制链接

扫一扫

专栏目录