文档章节

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

覃勇铖
 覃勇铖
发布于 2016/11/29 14:36
字数 337
阅读 15
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

咕泡-Factory设计模式笔记

个人感悟: 设计模式都是处理复杂问题的,如果问题本身很简单,使用设计模式反而累赘,增加了开发的复杂性 遇到最简单的情况,直接 new 如果创建对象的过程简单,但是需要匹配不同情况,返回...

职业搬砖20年
22分钟前
0
0
Java中的锁分类

在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类。介绍的内容如下: 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁/读写锁 乐观锁/悲观锁 分段锁 偏...

Funcy1122
30分钟前
0
0
Ansible随机数

想为你的Ansible剧本取一个随机数?还想在接下来的运行中保持系统的等幂性?这里有一个答案。 假如,你要为一大批服务器设置cron任务,却不想让它们同时启动,你可以这样设置分钟数: minute...

大别阿郎
39分钟前
0
0
SpringCloud之服务注册中心Eureka

本系列介绍的配置均基于 Spring Boot 2.0.1.RELEASE 版本和 Spring Cloud Finchley.SR1 服务注册中心 Spring Cloud 已经帮我们实现了服务注册中心,我们只需要很简单的几个步骤就可以完成。 ...

熊小飞呀
今天
9
1
“Comparison method violates ...”异常的再现方法

前提条件:JDK8 代码: import java.util.ArrayList;import java.util.Collections;import java.util.Comparator;import java.util.List;public class Test { public stat......

hunterli
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部