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

二、before(),after(),prepend(),append()等新增DOM

before()

before()是个ChildNode方法，也就是节点方法。节点方法对应于元素方法。区别在于，节点可以直接是文本节点，甚至注释等。但是，元素必须要有HTML标签。

因此，before()的参数既可以是DOM元素，也可以是DOM节点，甚至可以直接字符内容;

语法如下

void ChildNode.before((节点或字符串)... 其它更多节点);

DOM案例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <img  id="images" src="detail.jpg" alt="">

     <p><button id="beforeText">图片前面插入文字“美女：”</button></p>

 </body>

 </html>

 <script>

 //插入节点的方法

 var eleImg = document.getElementById('images');

 var eleBtnBeforeText = document.getElementById('beforeText');

 eleBtnBeforeText.addEventListener('click', function () {

     var eleTitle=document.createElement('h1');

      eleTitle.innerHTML='美女';

       eleImg.before(eleTitle);

 });

 </script>

这是插入DOM节点，那可不可以指接拆入纯文本呢O(∩_∩)  淡然可以，我们再看一下纯文本代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<img  id="images" src="detail.jpg" alt="">

	<p><button id="beforeText">图片前面插入文字“美女：”</button></p>

</body>

</html>

<script>

//插入节点的方法

var eleImg = document.getElementById('images');

var eleBtnBeforeText = document.getElementById('beforeText');

eleBtnBeforeText.addEventListener('click', function () {

    eleImg.before("我是文字");

});

</script>

　　

显然是可以的，那插入HTML字符串呢

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <img  id="images" src="detail.jpg" alt="">

    <p><button id="beforeText">图片前面插入文字“美女：”</button></p>

</body>

</html>

<script>

    //兼容处理源自 https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md

    (function (arr) {

  arr.forEach(function (item) {

    if (item.hasOwnProperty('before')) {

      return;

    }

    Object.defineProperty(item, 'before', {

      configurable: true,

      enumerable: true,

      writable: true,

      value: function before() {

        var argArr = Array.prototype.slice.call(arguments),

          docFrag = document.createDocumentFragment();

        argArr.forEach(function (argItem) {

          var isNode = argItem instanceof Node;

          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));

        });

        this.parentNode.insertBefore(docFrag, this);

      }

    });

  });

})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

</script>

<script>

//插入节点的方法

var eleImg = document.getElementById('images');

var eleBtnBeforeText = document.getElementById('beforeText');

eleBtnBeforeText.addEventListener('click', function () {

    eleImg.before('<strong>美女：</strong>');

});

</script>

可以看吃是不可以直接插入HTML字符串的，有人要疑问了，我非要在图片前面插入HTML字符内容怎么办

可以使用兼容性更好的insertAdjacentHTML() DOM方法，使用示意如下：

document.getElementById('img').insertAdjacentHTML('beforebegin', '<strong>美女：</strong>');

语法如下：

element.insertAdjacentHTML(position, html);

<html>

     <head>

     <mce:script language="javascript"><!--

     function myfun(){

         var obj = document.getElementById("btn1");

         obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">");

     }  

// --></mce:script>

     </head>

     <body>

         <input name="txt">

         <input id="btn1" name="btn1" type="button" value="更多" onclick="myfun()">

     </body>

 </html>

　　更加详细的关于点击insertAdjacentHTML

after()

after跟before()语法特性兼容性都是一一对应的，差别就在于语义上，一个是在前面插入，一个是在后面插入。，这里就不更详细的解释了

重点

after（）与before这些新的方法有兼容性，兼容版本如下图所示

如果非要再旧版浏览器使用新的API属性怎么办呢，我们需要引入一段代码来让老式浏览器兼容

// 源自 https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md

(function (arr) {

  arr.forEach(function (item) {

    if (item.hasOwnProperty('before')) {

      return;

    }

    Object.defineProperty(item, 'before', {

      configurable: true,

      enumerable: true,

      writable: true,

      value: function before() {

        var argArr = Array.prototype.slice.call(arguments),

          docFrag = document.createDocumentFragment();

        argArr.forEach(function (argItem) {

          var isNode = argItem instanceof Node;

          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));

        });

        this.parentNode.insertBefore(docFrag, this);

      }

    });

  });

})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

　　注意，上面的polyfill 并不支持IE8及其以下浏览器。 API只能在至少兼容到IE9浏览器的项目使用。

】结束

三、结束语

我们如今，原生的DOM API借鉴jQuery的优点，也整出了很多简单遍历的API方法；如果我们再粘贴一些polyfill JS搞定兼容性问题；再配合ES5很多数据处理方法；DOM leave 3的事件处理等。

基本上就没有需要使用jQuery的理由了，省了资源加载，提高了代码性能，

所以，基本上，已经不可逆地，在不久将来，不出几年，行业会兴起原生DOM API，原生JS开发前端应用的小风尚，jQuery会越来越不被人提起，完成其历史使命，日后可以领取个终身成就奖。

javascript插入before(),after()新DOM方法的更多相关文章

  1. before(),after(),prepend(),append()等新DOM方法简介

    一.DOM API也在不断升级 web前端标准一直在不断升级,比方说,说了很多年的HTML5.CSS3,以及天天见的ES6. 然后,似乎就没有然后了.实际上,除了HTML5/CSS3/ES6+,关于D ...

  2. JavaScript中易混淆的DOM属性及方法对比

    JavaScript中易混淆的DOM属性及方法对比 ParentNode.children VS Node.prototype.childNodes ParentNode.children:该属性继承 ...

  3. 将JavaScript 插入网页的方法

    将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...

  4. 《高性能javascript》 领悟随笔之-------DOM编程篇

    <高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  5. DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素

      1.DOM 方法   一些 DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTa ...

  6. 第一百一十四节，JavaScript文档对象，DOM进阶

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

  7. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  8. 总结一下自己脑海里的JavaScript吧（一）--DOM模型

    今天是2019年6月25日,闲来无事,写一篇文章来看看自己脑袋里装了多少JavaScript知识! 这儿就第一章: 说起JavaScript,它是什么?后端脚本语言?前端编程语言?还是在网站浏览器上运 ...

  9. 轻松学习JavaScript二十二：DOM编程学习之节点操作

    DOM编程不只能够查找三种节点,也能够操作节点.那就是创建,插入,删除.替换和复制节点.先来看节点 操作方法: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...

随机推荐

  1. latex插图续

    LaTeX中一般只直接支持插入eps(Encapsulated PostScript)格式的图形文件, 因此在图片插入latex文档之前应先设法得到图片的eps格式的文件.  UNIX下的各种应用软件 ...

  2. HTTP服务器

    1.项目介绍 HTTP协议是应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.协议的详细内容,前面一篇HTTP协议详解已经详细介绍了,这里不再赘述. 项目总体描述:HTTP支 ...

  3. xamarin.android 绑定百度地图SDK遇到的问题

    在 xamarin.android 绑定项目中,绑定 百度地图的LBS地图SDK,参考 https://developer.xamarin.com/guides/android/advanced_to ...

  4. 又想起Solaris

    想起曾几何时,学习的第一个UNIX-like操作系统.只可惜,从来都是在此操作系统上用C语言编程,而没有用过Sun公司的java. 又几何时,Sun公司慢慢不行了.再后来过了几年,Sun公司把Ultr ...

  5. 【搬运工】之YSlow安装教程

    YSlow安装教程(我只是搬运工,推荐好用的地址) 地址: https://devework.com/yslow.html YSlow (解析为 why slow)是雅虎基于网站优化规则推出的工具,帮 ...

  6. Spring Aop 应用实例与设计浅析

    0.代码概述 代码说明:第一章中的代码为了突出模块化拆分的必要性,所以db采用了真实操作.下面代码中dao层使用了打印日志模拟插入db的方法,方便所有人运行demo. 1.项目代码地址:https:/ ...

  7. Python学习日志_2017/09/08

    今天早晨学习了<Head First :HTML and CSS>:学习了两个章节,感觉从基础学习特别的踏实,能看懂的同时踏踏实实的锻炼了基础的能力.我个人认为无论哪个行业,最重要的永远是 ...

  8. 第4阶段——制作根文件系统之编译配置安装busybox(3)

    在上一节分析出制作一个最小的根文件系统至少需要: (1)/dev/console(终端控制台, 提供标准输入.标准输出以及标准错误) /dev/null  (为空的话就是/dev/null, 所有写到 ...

  9. webarchive文件转换成htm文…

    原文地址:webarchive文件转换成htm文件作者:xhbaxf Mac OS X系统带有文件转换功能,可以把webarchive文件变成html文件.方法是:   Step 1: 建立一个文件夹 ...

  10. Rsync for windows

    说到电脑,我真是一屋子都是. 从房间到大厅,就已经有5台.这还没包括服务器. 虽然这5台电脑我最常用的也只是2~3台.其他的不是给朋友们来坐的时候打打游戏.就是给妈妈上网看看报纸. 不过我相信很多朋友 ...