<!-- 正文开始 -->
IE支持innerHTML与innerText
FireFox支持innerHTML与textContent
所以在IE与FireFox中使用显示内容时,必须得先判断浏览器,然后决定使用innerText还是textContent。
<div id="mydiv"> </div> <script type="text/javascript"> function isIE() { return navigator.userAgent.toLowerCase().indexOf('msie')>0; } function isFireFox() { return navigator.userAgent.toLowerCase().indexOf('firefox')>0; } function showTime() { var mydiv = document.getElementByIdx("mydiv"); if(isIE()) { //mydiv.innerText="<font color='red'>"+new Date()+"</font>"; mydiv.innerHTML="<font color='red'>"+new Date()+"</font>"; } if(isFireFox) { //mydiv.textContent="<font color='red'>"+new Date()+"</font>"; mydiv.innerHTML="<font color='red'>"+new Date()+"</font>"; } } window.setTimeout('showTime()',0); </script>
|
还可以:
if(document.all){
document.getElementByIdx('element').innerText = "my text";
} else{
document.getElementByIdx('element').textContent = "my text";
}
还可以:
<mce:script type="text/javascript"><!--
var lBrowser = {};
lBrowser.agt = navigator.userAgent.toLowerCase();
lBrowser.isW3C = document.getElementByIdx ? true:false;
lBrowser.isIE = ((lBrowser.agt.indexOf("msie") != -1) && (lBrowser.agt.indexOf("opera") == -1) && (lBrowser.agt.indexOf("omniweb") == -1));
lBrowser.isNS6 = lBrowser.isW3C && (navigator.appName=="Netscape") ;
lBrowser.isOpera = lBrowser.agt.indexOf("opera") != -1;
lBrowser.isGecko = lBrowser.agt.indexOf("gecko") != -1;
lBrowser.ieTrueBody =function (){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
};
//为Firefox下的DOM对象增加innerText属性
if(lBrowser.isNS6){ //firefox innerText define
HTMLElement.prototype.__defineGetter__( "innerText",
function(){
return this.textContent;
}
);
HTMLElement.prototype.__defineSetter__( "innerText",
function(sText){
this.textContent=sText;
}
);
}
alert(lBrowser.isNS6);
// --></mce:script>
分享到:
相关推荐
今天小编就为大家分享一篇关于js中innerText/textContent和innerHTML与target和currentTarget的区别,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
在 JavaScript 中,innerHTML 和 innerText 是两个常用的属性,它们用于获取 HTML 元素中的内容。虽然它们都是用于获取内容的,但它们在获取...因此,在实际开发中,尽量使用 innerHTML 属性,以确保浏览器的兼容性。
不过,为了更广泛的兼容性,推荐使用`textContent`属性,它在所有现代浏览器中都可用,并且行为与`innerText`类似。 #### 应用场景 - **使用`innerHTML`:** - 当需要动态生成HTML结构时,例如构建表格或列表。 ...
总的来说,处理innerText的浏览器兼容问题需要理解其内在的行为差异,并根据实际需求选择合适的解决方案。在编写代码时,可以结合使用innerText、textContent、innerHTML等属性,以及自定义的遍历函数,以适应不同的...
- 使用innerText和innerHTML时需要注意浏览器兼容性,innerText主要在IE中广泛支持,其他浏览器可能需要使用textContent。 - 对于大量HTML内容的修改,innerHTML更为合适;如果只是简单修改文本,innerText更简洁。 ...
为了实现跨浏览器兼容性,可以使用`innerText`和`textContent`的组合: ```javascript var textContent = element.textContent || element.innerText; ``` 当需要从`innerHTML`获取无HTML标签的纯文本时,可以使用...
element.innerHTML = element.textContent; ``` 了解这些方法后,你可以根据实际需求选择合适的方式来处理`innerHTML`中的JavaScript代码。在进行动态HTML插入时,考虑到性能、安全性和可维护性,建议尽可能避免...
在跨浏览器兼容性考虑时,由于`innerText`在非IE浏览器中的实现可能不完全相同,推荐使用`textContent`属性作为替代,因为`textContent`在所有现代浏览器中都有良好的支持,它与`innerText`类似,但不处理CSS样式。...
- `innerText`:IE8及以下版本不支持,需要使用`textContent`作为替代。 #### 四、实际应用场景 1. **动态构建DOM**:当需要根据数据动态生成复杂的HTML结构时,可以使用`innerHTML`。 2. **安全性要求高**:如果...
而innerText虽然在某些情况下提供更符合预期的文本内容,但由于其非标准和浏览器兼容性问题,应当谨慎使用。 了解这些属性的区别对于JavaScript开发者来说至关重要,能够帮助他们在实现页面动态更新、数据交互和...
3. **安全问题**:使用`innerHTML`设置用户输入的内容时,需要注意XSS(跨站脚本攻击)风险。不适当的使用可能导致恶意代码执行,因此需要进行适当的输入验证和编码。 4. **与innerText的区别**:`innerText`属性与...
唯一需要注意的地方: innerText与textContent,显示页面的时候不能用innerHTML,否则会被解析。innerText与textContent是在除FF之外的浏览器与FF之间的差异。 代码如下: var innerText = document.body.innerText ?...
当一些开发者从IE转向其他浏览器时,常常遇到不兼容的问题,因为他们在Firefox中尝试使用`innerText`,却发现可以使用`textContent`作为替代。然而,这两者并不完全等价。 `innerText` 的行为是将元素的`innerHTML`...
在处理用户输入或从外部源获取数据时,应谨慎使用 `innerHTML`,尽可能使用 `textContent` 或 `innerText` 来防止潜在的安全问题。 总的来说,`innerText` 和 `innerHTML` 是JavaScript中处理元素内容的两个关键...
var textContent = document.getElementById("myDiv").innerText; // 获取innerHTML var htmlContent = document.getElementById("myDiv").innerHTML; ``` #### 四、跨浏览器的设置InnerHTML方法 在不同的浏览器...
在进行网页开发时,经常会遇到浏览器兼容性问题,尤其是在使用JavaScript编程语言的时候。不同浏览器之间的差异可能会影响到代码的正常运行。因此,解决这些兼容性问题就成为了网页开发者们必须面对的一个挑战。 ...
在前端开发中,JavaScript和DOM操作是核心组成部分,而不同浏览器之间的兼容性问题常常困扰开发者。以下将详细介绍在处理JavaScript和DOM时遇到的兼容性问题以及相应的解决方法。 一、DOM节点的访问兼容性问题及...