火狐下的innerText替代方案textContent

在前端的开发中常常要展示用户输入的数据,假如用户输入<html,&lt; 之类的html标签,而我们又要正正确展示出来怎么办呢?

通常此类数据保存到数据库中时会被编码后存入,如<html被转换为&lt;html 然后&lt被转换为&amp;lt 这样在前台展示时就会正确显示了。

但是如果我们要用前端操作的方式直接将不编码的数据展示呢?

大多数浏览器中直接支持innerText的方式,这样其实浏览器自动将编码后的存入。但是FireFox浏览器却不支持该属性,不过它给我们提供了另外的一个属性

textContent来替代,这样我们就可以写一个兼容浏览器的方式了

function setInnerText(ele, text){
   if (typeof ele.textContent === 'string') {
       ele.textContent = text;
   }
   else {
       ele.innerText = text;
   }
}

 目前textContent已经被DOM Level3作为标准属性,支持该属性的还有IE9+、Safari 3+、Opera 10+、Chrome

posted @ 2012-05-08 15:36  自由小菜园  阅读(894)  评论(0编辑  收藏  举报