文档章节

纯JS为DOM添加html字符串:appendHTML方法和prependHTML方法

覃勇铖
 覃勇铖
发布于 2016/11/29 14:36
字数 337
阅读 16
收藏 0

/**
     * 
纯JS为DOM添加html字符串:appendHTML方法和prependHTML方法

* * http://www.myexception.cn/HTML-CSS/1876216.html

* http://www.zhangxinxu.com/wordpress/2013/05/js-dom-basic-useful-method/
     * @param {Object} html
     */
HTMLElement.prototype.beforeHTML = function(html) {
    // If elements have a native insertAdjacentHTML, use it in four HTML
    // insertion functions with more sensible names.
    if(document.createElement("div").insertAdjacentHTML) {
        this.insertAdjacentHTML("beforebegin", html);
        return this;
    }
    var fragment = fragment(html);
    this.parentNode.insertBefore(fragment, this);
    // 据说下面这样子世界会更清净
    fragment = null;
};
HTMLElement.prototype.appendHTML = function(html) {
    // If elements have a native insertAdjacentHTML, use it in four HTML
    // insertion functions with more sensible names.
    if(document.createElement("div").insertAdjacentHTML) {
        this.insertAdjacentHTML("beforeend", html);
        return this;
    }
    var fragment = fragment(html);
    this.appendChild(fragment);
    // 据说下面这样子世界会更清净
    fragment = null;
};
HTMLElement.prototype.prependHTML = function(html) {
    // If elements have a native insertAdjacentHTML, use it in four HTML
    // insertion functions with more sensible names.
    if(document.createElement("div").insertAdjacentHTML) {
        this.insertAdjacentHTML("afterbegin", html);
        return this;
    }
    var fragment = fragment(html);
    // 插入到容器的前面 - 差异所在
    this.insertBefore(fragment, this.firstChild);
    // 内存回收?
    fragment = null;
};
HTMLElement.prototype.afterHTML = function(html) {
    // If elements have a native insertAdjacentHTML, use it in four HTML
    // insertion functions with more sensible names.
    if(document.createElement("div").insertAdjacentHTML) {
        this.insertAdjacentHTML("afterend", html);
        return this;
    }
    var fragment = fragment(html);
    this.parentNode.insertBefore(fragment, this.nextSibling);
    // 据说下面这样子世界会更清净
    fragment = null;
};


function fragment(html) {
    var nodes, divTemp = document.createElement("div"),
        fragment = document.createDocumentFragment();
    divTemp.innerHTML = html;
    // 此时div.childNodes就是我们需要的节点了
    nodes = divTemp.childNodes;
    for(var i = 0, length = nodes.length; i < length; i += 1) {
        // 容器fragment加载克隆的节点 - 克隆的作用是保证nodes的完整
        fragment.appendChild(nodes[i].cloneNode(true));
    }
    // 据说下面这样子世界会更清净
    nodes = null;
    divTemp = null;
    return fragment;
}

© 著作权归作者所有

共有 人打赏支持
覃勇铖
粉丝 0
博文 7
码字总数 6432
作品 0
武汉
jquery 事件失效以及解决方法

主要区分于:bind ()与live()方法。 .live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的: $('.clickme').live('click', function() {alert("Live handler called.");}); ...

柒月-小妖精
2013/04/22
0
0
JavaScript 学习(1)

参考资料:http://www.w3school.com.cn/js/index.asp 额,发现 http://www.w3cschool.cc 这里的资料似乎比上面那个更新鲜一些... 一、教程 js是一种轻量级的编程语言,可插入html页面中,并由...

明天以后
2014/09/30
0
0
javascript插入before(),after()新DOM方法

随着web的技术突飞猛进的发展。HTML5 ES6等新技术的发展,与此同时DOM等标准也在悄悄的进步,各大浏览器也在悄悄的发展适配新的属性和方法,今天我们来看看Javascript新的DOM的方法 before()...

急速奔跑中的蜗牛
06/22
0
0
jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
07/20
0
0
JavaScript性能优化小知识总结

前言   一直在学习javascript,也有看过《犀利开发Jquery内核详解与实践》,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒...

leycau
2015/03/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Coding and Paper Letter(三十九)

资源整理。 1 Coding: 1.Python库benchmark rio s3,用于在访问S3上的文件时对Rasterio / GDAL的多线程性能进行基准测试的工具。 benchmark rio s3 2.Pangeo-Binder Cookiecutter模板。 cook...

胖胖雕
35分钟前
1
0
Promise 对象

Promise(承诺) 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供...

简心
38分钟前
0
0
让UI设计师崩溃的瞬间,你经历过哪些?

隔行如隔山,这句话人人耳熟能详,但其实隔行并不可怕,大家各谋其事,各尽其职,倒也互不打扰,真正可怕的是,是内行还要受外行指点江山,而最难的部分,便是那沟通。流畅的沟通,和声细语,...

mo311
39分钟前
1
0
python进制转换

#进制转换print(bin(10)) #十进制转换成二进制print(oct(10)) #十进制转换成八进制print(hex(10)) #十进制转换成十六进制print(int('1010',2)) #二进制转十进制print(int(...

fadsaa
50分钟前
3
0
syntax error near unexpected token

最近不断重复在虚拟机CentOS测试安装gitlab,因为gitlab有一个脚本需要饭强才能下载,于是我先在windows下载好再上传到虚拟机,可是执行脚本的时候提示“syntax error near unexpected toke...

W_Lu
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部