`
zhouyrt
  • 浏览: 1162628 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

只有Firefox不支持insertAdjacentHTML和insertAdjacentText

阅读更多

这两个属性首先是IE4提出且实现的,它可以实现在一个 DOM 元素的前面、后面、第一个子元素前面、最后一个子元素后面四个位置,插入指定的 HTML 代码 其它浏览器相继支持。唯有Firefox不支持。insertAdjacentHTML已被HTML5采纳。如下扩展HTMLElement.prototype,为其增加这两个属性:

if(HTMLElement.prototype.insertAdjacentHTML == undefined) {
    HTMLElement.prototype.insertAdjacentElement = function(where, node) {
        switch (where) {
            case "beforeBegin":
                this.parentNode.insertBefore(node, this);break;
            case "afterBegin":
                this.insertBefore(node, this.firstChild);break;
            case "beforeEnd":
                this.appendChild(node);break;
            case "afterEnd":
                if (this.nextSibling)
                    this.parentNode.insertBefore(node, this.nextSibling);
                else
                    this.parentNode.appendChild(node);
                break;
        }
    }
    HTMLElement.prototype.insertAdjacentHTML = function(where, html) {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var parsedHTML = r.createContextualFragment(html);
        this.insertAdjacentElement(where, parsedHTML);
    }
    HTMLElement.prototype.insertAdjacentText = function(where, txt) {
        var parsedText = document.createTextNode(txt);
        this.insertAdjacentElement(where, parsedText);
    }
}

 

http://msdn.microsoft.com/en-us/library/ms536452(VS.85).aspx
http://msdn.microsoft.com/en-us/library/ms536453(VS.85).aspx
http://www.w3.org/TR/html5/apis-in-html-documents.html#insertadjacenthtml

 

 

2
1
分享到:
评论

相关推荐

    innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别

    但类似的非标准属性/方法在其他浏览器中并不一定都得到支持。 类似的像 insertAdjacentElement , insertAdjacentElement , insertAdjacentHTML , insertAdjacentText 等。如果需要使用这些非标准的方法,...

    insertAdjacentHTML动态插入行[归类].pdf

    在软件开发中,尤其是涉及到网页动态更新和DOM操作时,`insertAdjacentHTML`是一个非常实用的方法。这个方法允许开发者在指定的位置动态插入HTML内容,相比`innerHTML`和`innerText`,它提供了更多的灵活性。`...

    引用 js在IE与FF之间的区别详细解析

    比如innerText和textContent在IE和Firefox中的行为就不一致,Firefox使用textContent代替了innerText,因此在使用时需要注意替换。同样,className属性在IE中用来设置和获取元素的样式类,而在Firefox中则使用class...

    IE与firefox下Dhtml的一些区别小结

    Firefox不支持`innerText`属性,开发者需要使用Range对象的技巧来获取元素的文本内容。而在IE中,`innerText`非常方便。 6. 插入HTML: IE提供了一个方便的`insertAdjacentHTML`方法,Firefox可以通过`...

    在table中插入多行,能使用与insertAdjacentHTML相似的功能吗?

    下面的例子实现了这个功能,同样地,该例支持IE和firefox。该功能的实现意义重大,这样页面元素的处理,就全部都能够用拼html字串的方法来实现了。 1 插入行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能...

    eslint-plugin-no-unsanitized:自定义ESLint规则可禁止不安全的innerHTML,outerHTML,insertAdjacentHTML等

    在不使用预定义转义功能的情况下,我们将不允许分配(例如,对innerHTML)和调用(例如,对insertAdjacentHTML)。 转义函数必须使用模板字符串来调用。 函数名称被硬编码为Sanitizer.escapeHTML和escapeHTML 。 ...

    在table中插入多行的js代码(与insertAdjacentHTML相似的功能)

    但是,`insertAdjacentHTML`方法并不直接适用于表格元素中添加行(tr元素)。 在表格中插入多行的常规方法之一是使用`appendChild`或者`insertBefore`方法,这两种方法可以用来将新的`<tr>`元素添加到表格的`...

    如何在指定的地方插入html内容和文本内容

    在网页动态更新中,有时我们需要在已有HTML结构的特定位置插入新的内容,而`insertAdjacentHTML`和`insertAdjacentText`方法就是实现这一需求的重要工具。这两个方法属于DOM(Document Object Model)的一部分,允许...

    js常用操作

    - `insertAdjacentHTML` 和 `insertAdjacentText`:用于在指定位置插入 HTML 或文本。 #### 字符串处理 字符串是 JavaScript 中常见的数据类型,用于处理文本。 - `lastIndexOf` 和 `indexOf`:用于查找子字符串...

    IE浏览器检测的方法.docx

    例如,`table.cells`仅在IE和Opera中可用,`innerText`和`insertAdjacentHTML`在大部分非Firefox浏览器中支持,`window.external.AddFavorite`用于在IE下添加到收藏夹,而`window.sidebar.addPanel`则适用于Firefox...

    深入理解javascript动态插入技术

    然而,在一些旧版本的IE浏览器中,`innerHTML`属性和`insertAdjacentHTML`方法并不被支持。在这些环境中,开发者需要借助其他手段来实现类似的功能。例如,在旧版IE中,`innerHTML`属性对于某些HTML元素(如`col`、`...

    javaScript重要知识

    使用`insertAdjacentHTML()`或`insertAdjacentText()`方法,可以在DOM元素的前后插入内容。 **示例代码:** ```javascript document.body.insertAdjacentHTML("BeforeBegin", "要在元素前插入的内容"); document....

    js对各标签(控件)的操作

    // 获取文档内容实际宽度,不包括滚动条等 ``` 2. **获取窗口高度**: ```javascript document.body.clientHeight; // 获取文档内容实际高度,不包括滚动条等 ``` 3. **获取屏幕宽度**: ```javascript ...

    js实现上传文件添加和删除文件选择框

    在脚本中要用到两个函数:insertAdjacentHTML和removeChild,而恰好这两个函数在Firefox下都不能正常使用。几乎花费了一天的时候,在网上搜索着解决的方法,还好被找到了,也让我大松一口气。 具体两个函数是这样的...

    CodeCopy浏览器扩展实现在每个代码块上添加一个复制至剪贴板的按钮

    1. **浏览器扩展开发**:首先,要创建一个浏览器扩展,开发者需要熟悉Chrome或Firefox等浏览器的扩展API,如`manifest.json`配置文件的编写,这是扩展的核心,定义了扩展的功能、权限和入口点。此外,还需要了解...

    table-rowspan表格自动合并单元格插件

    比如,`querySelector`和`querySelectorAll`用于获取单个或多个匹配CSS选择器的元素,而`insertAdjacentHTML`和`removeChild`则分别用于插入和删除元素。 8. **CSS样式**:为了使表格看起来更美观,插件可能还会...

Global site tag (gtag.js) - Google Analytics