文档章节

纯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()...

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

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

JandenMa
2018/07/20
0
0
JavaScript获取DOM节点HTML元素CSS样式

JavaScript获取DOM节点HTML元素CSS样式技术 maybe yes 发表于2015-01-10 18:07 原文链接 : http://blog.lmlphp.com/archives/59 来自 : LMLPHP后院 如何使用 JavaScript 获取某个 DOM 节点下...

hosser
2015/03/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

dotConnect for Oracle入门指南(六):使用事务

【下载dotConnect for Oracle最新版本】 dotConnect for Oracle(原名OraDirect.NET)建立在ADO.NET技术上,为基于Oracle数据库的应用程序提供完整的解决方案。它为设计应用程序结构带来了新的...

电池盒
6分钟前
0
0
Spring Batch JSR-305 支持

本发布版本中为 JSR-305 支持添加了一个注解。这个为了与 Spring 框架中的 Null-safety 注解取得平衡,然后为 Spring Batch 添加为 public APIs。 这个注解不仅仅在使用 Spring Batch APIs ...

honeymoose
7分钟前
0
0
React Native工程中TSLint静态检查工具的探索之路

背景 建立的代码规范没人遵守,项目中遍地风格迥异的代码,你会不会抓狂? 通过测试用例的程序还会出现Bug,而原因仅仅是自己犯下的低级错误,你会不会抓狂? 某种代码写法存在问题导致崩溃时...

美团技术团队
8分钟前
0
0
mysql update select

在遇到需要update设置的参数来自从其他表select出的结果时,需要把update和select结合使用,不同数据库支持的形式不一样,在mysql中如下: update A inner join(select id,name from B) c on A.i...

张欢19933
12分钟前
0
0
KaliLinuxNetHunter教程刷入第三方Recovery与开始刷机

KaliLinuxNetHunter教程刷入第三方Recovery与开始刷机 2.刷入第三方Recovery(即TWRP) TWRP(TeamWin Recovery Project)是一款XDA大神开发的一款全触屏操作的第三方Recovery。支持滑动确认...

大学霸
15分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部