节点插入

对于早期的w3c浏览器,并没有实现ie的私有方法insertAdjacentHTML(目前已是HTML5标准),可以用appendChild模拟该方法的实现:

if(typeof HTMLElement !=='undefined' && !HTMLElement.prototype.insertAdjacentHTML){
            var insertAdjacentElement = function(node,position,el){
                switch (position.toLowerCase()){
                    case 'beforebegin':
                        node.parentNode.insertBefore(el,node);
                        break;
                    case 'afterbegin':
                        node.insertBefore(el,node.firstChild);
                        break;
                    case 'beforeend':
                        node.appendChild(el);
                        break;
                    case 'afterend':
                        if(node.nextSibling){
                            node.parentNode.insertBefore(el,node.nextSibling);
                        }else{
                            node.parentNode.appendChild(el);
                        }
                        break;
                }
            };
            HTMLElement.prototype.insertAdjacentHTML = function(position,html){
                var range = document.createRange(),frag,
                        parent;
                range.setStart(document.body);
                frag = range.createContextualFragment(html);
                if(this.nodeType == 3 || this.nodeType == 8){
                    parent = this.parentNode;
                    insertAdjacentElement(parent,position,frag);
                }else{
                    insertAdjacentElement(this,position,frag);
                }
            }
        }

 使用了Range.createContextualFragment(html)方法,MDN对该方法叙述:The Range.createContextualFragment() method returns a DocumentFragment

by invoking the HTML fragment parsing algorithm or the XML fragment parsing algorithm with the start of the range (the parent of the

selected node) as the context node. The HTML fragment parsing algorithm is used if the range belongs to a Document whose HTMLness bit

is set. In the HTML case, if the context node would be html, for historical reasons the fragment parsing algorithm is invoked with body

 as the context instead. 也就是说,选中节点的父节点(即Range对象的startContainer属性)为HTML(XML)文档片段解析算法的上下文节点。

该方法兼容Chrome,Firefox,IE11,以及Opera15.对于模拟insertAdjacentHTML足够用。当然也可使用兼容性没有问题的DocumentFragment对象。

  但是出于好奇,我用了jsperf对插入节点的各个方法进行性能分析,发现依旧是appendChild的插入方法效率最高(指的是单位时间内的操作数)。

  另外,对于innerHTML插入的易用性是不言而喻的,通常我们用一系列拼接的字符串给innerHTML赋值,此时会调用js解析器,将解析的相关节点

作为该元素的子节点。这个属性兼容性没有问题。相应的也有outerHTML属性,这个兼容性也没有多大问题,除非你是用的是Firefox 11之前的版本。

对于outerHTML可以用innerHTML做一些兼容性。

 1 //对Firefox 11- 版本做兼容,其不支持outerHTML属性
 2         function getOuterHtml(){
 3             var e = document.createElement("div");
 4             e.appendChild(this);
 5             return e.innerHTML;
 6         }
 7         function setOuterHtml(){
 8             var e = document.createElement("div");
 9             var p = this.parentNode;
10             e.appendChild(this);
11             while(e.firstChild){
12                 p.insertBefore(e.firstChild,this);
13             }
14             p.removeChild(this);
15         }
16 
17         if(Object.defineProperty){
18             Object.defineProperty(Element.prototype,"outerHTML",{
19                 get: getOuterHtml,
20                 set: setOuterHtml,
21                 enumerable: false,
22                 configurable: false
23             })
24         }else{
25             Element.prototype.__defineGetter__("outerHTML",getOuterHtml);
26             Element.prototype.__defineSetter__("outerHTML",setOuterHtml);
27         }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

使用DOM动态创建标签

本文是参考《javascript Dom 编程艺术》第八章的内容所写,用到的知识点,就是关于创建平稳的web页面。 使用DOM方法:   getEleme...

23090
来自专栏前端说吧

vue-学习笔记(更新中...)

96760
来自专栏前端知识分享

第60天:js常用访问CSS属性的方法

点语法可以得到 width  属性  和 top属性  带有单位的。 100px

10410
来自专栏Golang语言社区

厚土Go学习笔记 | 07. 基本类型

Go语言的基本类型有 bool string int int8 int16 int32 int64 uint uint8 uint16 uint32 uint6...

353120
来自专栏十月梦想

JS转义字符

89940
来自专栏web前端教室

JS基础知识之new操作符 | 前端卧谈会第9期

音频请点此进行收听 音频原文: new操作符是个啥? 就是你搞个 function abc(aa){ this.abc = aa } 然后 var xx = ...

19790
来自专栏GreenLeaves

JavaScript之insertBefore()和自定义insertAfter()的用法。

在JS图片库的第五版开发完后http://www.cnblogs.com/GreenLeaves/p/5691797.html#js_Five_Version我...

26590
来自专栏Bingo的深度学习杂货店

Python3切片详解

本文通过一个简单的例子讲解切片的应用: 先构造一个list列表a: a = list(range(1,8)) # [1, 2, 3, 4, 5, 6, 7]...

39550
来自专栏偏前端工程师的驿站

JS魔法堂:属性、特性,傻傻分不清楚

一、前言                                   或许你和我一样都曾经被下面的代码所困扰 var el = document.get...

31470
来自专栏大数据钻研

前端编码规范

基本原则 结构、样式、行为分离 统一缩进(建议 两个空格) 文件编码统一 不带BOM的UTF-8 一律使用小写字母 省略外链资源 URL 协议部分(FTP等其他...

40170

扫码关注云+社区

领取腾讯云代金券