火狐下的innerText替代方案textContent
在前端的开发中常常要展示用户输入的数据,假如用户输入<html,< 之类的html标签,而我们又要正正确展示出来怎么办呢?
通常此类数据保存到数据库中时会被编码后存入,如<html被转换为<html 然后<被转换为&lt 这样在前台展示时就会正确显示了。
但是如果我们要用前端操作的方式直接将不编码的数据展示呢?
大多数浏览器中直接支持innerText的方式,这样其实浏览器自动将编码后的存入。但是FireFox浏览器却不支持该属性,不过它给我们提供了另外的一个属性
textContent来替代,这样我们就可以写一个兼容浏览器的方式了
function setInnerText(ele, text){
if (typeof ele.textContent === 'string') {
ele.textContent = text;
}
else {
ele.innerText = text;
}
}
if (typeof ele.textContent === 'string') {
ele.textContent = text;
}
else {
ele.innerText = text;
}
}
目前textContent已经被DOM Level3作为标准属性,支持该属性的还有IE9+、Safari 3+、Opera 10+、Chrome