`
lmh2072005
  • 浏览: 113829 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

兼容outerHTML

 
阅读更多

 

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下outerHTML不支持问题"提示我们关注的是如何在Firefox中使用或模拟这个功能。 ...

    JavaScript在IE和Firefox(火狐)的不兼容问题解决

    为了解决这一不兼容问题,可以利用DOM Range API和`__defineGetter__`/`__defineSetter__`方法来模拟实现`outerHTML`属性的功能。代码中首先检查当前环境是否支持`HTMLElement.prototype`,然后定义了`outerHTML`的...

    IE innerHTML,outerHTML所引起的问题

    在处理动态内容和元素删除时,应当谨慎使用这两个属性,并根据实际情况选择更安全的DOM操作方法,以确保代码的兼容性和稳定性。同时,对于可能影响用户交互的问题,如焦点丢失,及时通过调用 `focus()` 方法进行修复...

    javascript innerHTML、outerHTML、innerText、outerText的区别

    例如,`myDiv.outerHTML = "&lt;span&gt;New Content&lt;/span&gt;"`将替换掉`&lt;div&gt;`为一个新的`&lt;span&gt;`元素。 - 示例:`document.getElementById("test_id3").outerHTML = "&lt;i&gt;&lt;u&gt;设置或获取对象及其内容的 HTML 形式.&lt;/u&gt;&lt;/i&gt;...

    jquery 获取 outerHtml 包含当前节点本身的代码

    开发者在编写代码时需要关注兼容性和性能问题,尤其是在处理大型文档或在性能敏感的应用中。 综上所述,了解和掌握如何获取一个元素的`outerHTML`是前端开发中的一项重要技能,特别是在需要精确复制页面元素结构时...

    innerHTML、outerHTML、innerText、outerText的用法与区别

    在Web开发中,尤其是涉及到DOM(Document Object Model)操作时,`innerHTML`、`outerHTML`、`innerText`和`outerText`是非常重要的属性。这些属性允许开发者方便地获取和设置HTML元素的内容,但它们之间有着微妙的...

    Firefox中使用outerHTML的2种解决方法

    总的来说,尽管Firefox早期版本不支持`outerHTML`,但开发者可以通过上述两种方式来实现跨浏览器的兼容性,确保在Firefox中也能正常使用`outerHTML`的功能。在实际开发中,根据项目需求和对浏览器兼容性的考虑,可以...

    解决Firefox下不支持outerHTML问题代码分享

    在Web开发中,兼容性问题始终是一个挑战,尤其是在处理不同浏览器之间的差异时。本文主要讨论的是如何解决Firefox浏览器不支持`outerHTML`属性的问题。`outerHTML`是Internet Explorer(IE)特有的一个属性,它允许...

    Firefox和IE兼容性问题及解决方法总结

    1. **outerHTML属性兼容** IE浏览器支持outerHTML属性,允许直接设置或获取一个元素及其所有子元素的HTML表示形式。而在Firefox中,这个属性是不存在的。为了解决这个问题,我们可以创建一个getter和setter方法,如...

    innerHTML,outerHTML,innerTEXT三者之间的区别

    - **兼容性**:`innerText` 在某些浏览器(如Firefox)中可能不被支持,此时可以使用`textContent`作为替代。 #### 案例演示 假设有一个id为"testdiv"的div元素: ```html 这是一个示例 包含一些;"&gt;内联元素...

    IE7-IE8 站点 兼容性 Pdf

    - **问题**:在IE8中,属性的排序方式发生了变化,这可能会影响属性集合以及`innerHTML` 和 `outerHTML` 的值。如果页面依赖于特定的属性排序,那么可能会出现问题。 - **解决方案**:建议通过属性名而不是位置来...

    兼容IE6、7、8的graphics画图的背景设置

    img.outerHTML = strNewHTML; i = i - 1; } } } window.attachEvent("onload", correctPNG); &lt;![endif]--&gt; ``` #### 代码解析 1. **条件判断**:使用`&lt;!--[if IE 6]&gt;`标记来确保这段脚本仅在IE6浏览器中执行...

    ie6z中兼容页面中所有png图片透明

    4. **替换原有图片**:最后,使用`outerHTML`属性将新的HTML结构替换到页面中,取代原有的`&lt;img&gt;`元素。 通过这种方式,即使是在老旧的IE6浏览器中,也能实现PNG图片的透明效果,从而提高了页面的兼容性和视觉效果...

    IE6兼容PNG24图片

    img.outerHTML = strNewHTML; i = i - 1; ``` - **执行时机**:最后,将这个修复PNG24图片显示的功能绑定到窗口加载事件上,确保在页面加载完成后立即执行。 ```javascript window.onload = function() { ...

    innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解

    而innerText虽然在某些情况下提供更符合预期的文本内容,但由于其非标准和浏览器兼容性问题,应当谨慎使用。 了解这些属性的区别对于JavaScript开发者来说至关重要,能够帮助他们在实现页面动态更新、数据交互和...

    编写兼容IE和FireFox的脚本

    在Web开发中,兼容性是一个重要的考虑因素,尤其是对于老版本的Internet Explorer (IE)和Firefox浏览器。由于它们在实现JavaScript和DOM(文档对象模型)时存在差异,编写兼容这两者的脚本是一项挑战。以下是一些...

Global site tag (gtag.js) - Google Analytics