innerText、textContent和innerHTML

innerText、textContent

设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
设置标签中的文本内容,应该使用innerText属性,谷歌,高版本火狐,IE8都支持,低版本火狐不支持

如何判断一个属性在浏览器中是否支持

如果一个属性在浏览器中不支持,那么这个属性的类型是undefined
判断这个属性的类型 是不是undefined,就知道浏览器是否支持

  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;
    }
  }

innerText、innerHTML

如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML

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

结论

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

发布了116 篇原创文章 · 获赞 4 · 访问量 1768

猜你喜欢

转载自blog.csdn.net/qq_43618136/article/details/104255920