obj.innerHTML 经常用到
obj.outerHTML包括元素本身 很少用 今天看到一个可以兼容firefox 的方法
如:
<ul id="a">
<li>addsd</li>
<li>addsd</li>
<li>addsd</li>
<li>addsd</li>
<li>addsd</li>
</ul>
alert(document.getElementById("a").outerHTML);
输出:
“
<ul id="a">
<li>addsd</li>
<li>addsd</li>
<li>addsd</li>
<li>addsd</li>
<li>addsd</li>
</ul>
”
alert(document.getElementById("a").innerHTML);
输出:
“
<li>addsd</li>
<li>addsd</li>
<li>addsd</li>
<li>addsd</li>
<li>addsd</li>
”
下面的用来兼容firefox
if(typeof(HTMLElement)!="undefined" && !window.opera)
{
HTMLElement.prototype.__defineGetter__("outerHTML",function()
{
var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++)
if(a[i].specified)
str+=" "+a[i].name+'="'+a[i].value+'"';
if(!this.canHaveChildren)
return str+" />";
return str+">"+this.innerHTML+"</"+this.tagName+">";
});
HTMLElement.prototype.__defineSetter__("outerHTML",function(s)
{
var r = this.ownerDocument.createRange();
r.setStartBefore(this);
var df = r.createContextualFragment(s);
this.parentNode.replaceChild(df, this);
return s;
});
HTMLElement.prototype.__defineGetter__("canHaveChildren",function()
{
return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
});
}
参考:http://www.cnblogs.com/doll-net/archive/2007/06/17/786835.html
分享到:
相关推荐
然而,与大部分现代浏览器的良好兼容性不同,Firefox在过去(尤其是在较旧的版本中)对`outerHTML`的支持并不完全。标题"解决Firefox下outerHTML不支持问题"提示我们关注的是如何在Firefox中使用或模拟这个功能。 ...
为了解决这一不兼容问题,可以利用DOM Range API和`__defineGetter__`/`__defineSetter__`方法来模拟实现`outerHTML`属性的功能。代码中首先检查当前环境是否支持`HTMLElement.prototype`,然后定义了`outerHTML`的...
在处理动态内容和元素删除时,应当谨慎使用这两个属性,并根据实际情况选择更安全的DOM操作方法,以确保代码的兼容性和稳定性。同时,对于可能影响用户交互的问题,如焦点丢失,及时通过调用 `focus()` 方法进行修复...
例如,`myDiv.outerHTML = "<span>New Content</span>"`将替换掉`<div>`为一个新的`<span>`元素。 - 示例:`document.getElementById("test_id3").outerHTML = "<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>...
开发者在编写代码时需要关注兼容性和性能问题,尤其是在处理大型文档或在性能敏感的应用中。 综上所述,了解和掌握如何获取一个元素的`outerHTML`是前端开发中的一项重要技能,特别是在需要精确复制页面元素结构时...
在Web开发中,尤其是涉及到DOM(Document Object Model)操作时,`innerHTML`、`outerHTML`、`innerText`和`outerText`是非常重要的属性。这些属性允许开发者方便地获取和设置HTML元素的内容,但它们之间有着微妙的...
总的来说,尽管Firefox早期版本不支持`outerHTML`,但开发者可以通过上述两种方式来实现跨浏览器的兼容性,确保在Firefox中也能正常使用`outerHTML`的功能。在实际开发中,根据项目需求和对浏览器兼容性的考虑,可以...
在Web开发中,兼容性问题始终是一个挑战,尤其是在处理不同浏览器之间的差异时。本文主要讨论的是如何解决Firefox浏览器不支持`outerHTML`属性的问题。`outerHTML`是Internet Explorer(IE)特有的一个属性,它允许...
1. **outerHTML属性兼容** IE浏览器支持outerHTML属性,允许直接设置或获取一个元素及其所有子元素的HTML表示形式。而在Firefox中,这个属性是不存在的。为了解决这个问题,我们可以创建一个getter和setter方法,如...
- **兼容性**:`innerText` 在某些浏览器(如Firefox)中可能不被支持,此时可以使用`textContent`作为替代。 #### 案例演示 假设有一个id为"testdiv"的div元素: ```html 这是一个示例 包含一些;">内联元素...
- **问题**:在IE8中,属性的排序方式发生了变化,这可能会影响属性集合以及`innerHTML` 和 `outerHTML` 的值。如果页面依赖于特定的属性排序,那么可能会出现问题。 - **解决方案**:建议通过属性名而不是位置来...
img.outerHTML = strNewHTML; i = i - 1; } } } window.attachEvent("onload", correctPNG); <![endif]--> ``` #### 代码解析 1. **条件判断**:使用`<!--[if IE 6]>`标记来确保这段脚本仅在IE6浏览器中执行...
4. **替换原有图片**:最后,使用`outerHTML`属性将新的HTML结构替换到页面中,取代原有的`<img>`元素。 通过这种方式,即使是在老旧的IE6浏览器中,也能实现PNG图片的透明效果,从而提高了页面的兼容性和视觉效果...
img.outerHTML = strNewHTML; i = i - 1; ``` - **执行时机**:最后,将这个修复PNG24图片显示的功能绑定到窗口加载事件上,确保在页面加载完成后立即执行。 ```javascript window.onload = function() { ...
而innerText虽然在某些情况下提供更符合预期的文本内容,但由于其非标准和浏览器兼容性问题,应当谨慎使用。 了解这些属性的区别对于JavaScript开发者来说至关重要,能够帮助他们在实现页面动态更新、数据交互和...
在Web开发中,兼容性是一个重要的考虑因素,尤其是对于老版本的Internet Explorer (IE)和Firefox浏览器。由于它们在实现JavaScript和DOM(文档对象模型)时存在差异,编写兼容这两者的脚本是一项挑战。以下是一些...