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

休言女子非英物，夜夜龙泉壁上鸣。这篇文章主要讲述before(),after(),prepend(),append()等新DOM方法简介相关的知识，希望能为你提供帮助。
一、DOM API也在不断升级

文章图片

web前端标准一直在不断升级，比方说，说了很多年的html5、CSS3，以及天天见的ES6。
然后，似乎就没有然后了。实际上，除了HTML5/CSS3/ES6+，关于DOM标准也是在不断升级进步，而且浏览器也在悄悄地进行跟进与支持。
然而，这种跟进与支持呢非常的低调与隐讳；加上行业的话语权大部分集中在JS工程师身上，同时DOM这种东西比较“低级”撑不起场面，因此各种什么技术大会啊，分享会议啊绝对不会讲这玩意儿的。
于是都叫他注意力很容易被带走，而没有意识到在DOM操作这一块，现在实际上已经非常厉害了。
二、before(),after(),prepend(),append()等新增DOM API
接下来要介绍这些新增的DOM API方法，都比较新，其设计目的是可以像jQuery那样，使用非常简单的api，便利的操作dom元素。
这些api包括：before()，after()，replaceWith()，append()，prepend()，好，下面一个一个介绍。
1. DOM API之before()这里的before()是个ChildNode方法，也就是节点方法。节点方法对应于元素方法。区别在于，节点可以直接是文本节点，甚至注释等。但是，元素必须要有HTML标签。
因此，before()的参数既可以是DOM元素，也可以是DOM节点，甚至可以直接字符内容，咦，感觉活脱脱的jQuery的before() API嘛？没错，真的很类似似，并且语义也是一样的，表示当前节点的前面是XXX。
语法如下：

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

【before(),after(),prepend(),append()等新DOM方法简介】从语法可以看出before()方法支持多个参数，并且参数可以是节点对象，也可以是字符串对象。
至于具体细节，我们可以通过一个一个例子来实际验证。
先来看一个最简单例子，已知HTML如下：

< img id="img" src="https://www.songbingjia.com/android/mm0.jpg">

如果我们希望在图片

<
img>

前面插入写文字，直接可以：

document.getElementById(‘img‘).before(‘美女：‘);

效果会是这样：

文章图片

如果我们插入的是一段HTML字符串，那效果又是怎样的呢？如下：

document.getElementById(‘img‘).before(‘< strong> 美女：< /strong> ‘);

结果，当当当当，HTML被转义成了安全的普通文本显示了，如下：

文章图片

可以看出原生DOM的before() API和jQuery中的before() API还是有差别的，在jQuery中，before()的参数值是作为html字符处理的，但是这里的before()是作为text字符处理的。
如果我们想要在图片前面插入HTML内容，可以使用DOM节点方式插入，例如：

var eleTitle = document.createElement(‘h4‘); eleTitle.innerHTML = ‘美女：‘; document.getElementById(‘img‘).before(eleTitle);

则会表现如下：

文章图片

可能有人要疑问了，我非要在图片前面插入HTML字符内容怎么办？
可以使用兼容性更好的insertAdjacentHTML() DOM方法，使用示意如下：

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

语法如下：

element.insertAdjacentHTML(position, html);

非本文重点就不展开了。
元素DOM的before() API还有一个很棒的特性，那就是可以同时插入多个节点内容，例如：

document.getElementById(‘img‘).before(‘1. 美女‘, ‘ ‘, ‘2. 美女‘);

效果如下截图所示：

文章图片

demo演示
以上所有出现的before()效果都可以狠狠地点击这里体验：DOM before()节点API方法demo
兼容性
before() API Chrome54+，Firefox49+才支持，还算比较新，IE edge目前还未支持，具体参见下面截图（实时兼容数据）：

文章图片

对于团队或公司内部的一些项目，管理平台或者工具之类的web页面我们可以放心大胆使用before()等API，如果是面向用户对兼容性有要求的项目呢？
很简单，加一段polyfill JS代码就可以了，如下（参考自MDN）：

// 源自 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及其以下浏览器。也就是before() API只能在至少兼容到IE9浏览器的项目使用。
和insertBefore()比较
insertBefore()作为老牌传统的API，优势在于兼容性好。不足之处，其语法着实很奇怪，A元素插到B元素前面，需要父元素parentNode.insertBefore(newNode, referenceNode)，小辈之间的打打闹闹牵扯到父辈，显然事情就会麻烦。至少这么多年下来insertBefore的参数究竟是新插入节点在前还是先插入节点在后，我都没有准确记清楚。
但是，before() API就不一样了，语法仅涉及到插入节点和相对节点，非常好记，不容易出错，而且API名称更短。
2. DOM API之after()after()和before()的语法特性兼容性都是一一对应的，差别就在于语义上，一个是在前面插入，一个是在后面插入。
由于语法类似，因此，就不一个一个示意了，若想直观体验after()的特性表现，您可以狠狠的点击这里：DOM after()节点API方法demo
然后下面的JS代码是对after() API的polyfill，同样地，至少IE9+浏览器。

//源自 https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md (function (arr) { arr.forEach(function (item) { if (item.hasOwnProperty(‘after‘)) { return; } Object.defineProperty(item, ‘after‘, { configurable: true, enumerable: true, writable: true, value: function after() { 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.nextSibling); } }); }); })([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

3. DOM API之replaceWith()其语法如下：

ChildNode.replaceWith((节点或字符串)... 更多节点);

表示替换当前节点为其他节点内容。
举个例子，把页面上所有HTML注释都替换成可显示的普通文本节点。
如下JS代码：

var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT); while (treeWalker.nextNode()) { var commentNode = treeWalker.currentNode; // 替换注释节点为文本节点 commentNode.replaceWith(commentNode.data); }

例如页面上有这么一段注释：

文章图片

点击某按钮执行上面的JS代码，结果这段注释内容变成普通文本显示在页面上了，效果如下截图：

文章图片

眼见为实，您可以狠狠的点击这里：DOM replaceWith()节点API方法demo
对我们开发有没有什么启示呢？比方说页面模板可以放在注释中……
同样，如果对兼容性又要求，可以使用下面的JS polyfill（参考自MDN）：

function ReplaceWith(Ele) { var parent = this.parentNode, i = arguments.length, firstIsNode = +(parent & & typeof Ele === ‘object‘); if (!parent) return; while (i-- > firstIsNode){ if (parent & & typeof arguments[i] !== ‘object‘){ arguments[i] = document.createTextNode(arguments[i]); } if (!parent & & arguments[i].parentNode){ arguments[i].parentNode.removeChild(arguments[i]); continue; } parent.insertBefore(this.previousSibling, arguments[i]); } if (firstIsNode) parent.replaceChild(this, Ele); } if (!Element.prototype.replaceWith) { Element.prototype.replaceWith = ReplaceWith; }if (!CharacterData.prototype.replaceWith) { CharacterData.prototype.replaceWith = ReplaceWith; } if (!DocumentType.prototype.replaceWith) { CharacterData.prototype.replaceWith = ReplaceWith; }

4. DOM API之prepend()其语法如下：

ParentNode.prepend((节点或字符串)... 更多节点);

表示在当前节点的最前面插入其它节点内容（作为子节点）。其意思和jQuery中的prepend() API是一样的，对jQuery熟悉的人学习这几个API都是分分钟的事情。
参数值特性什么的和before(), after()等方法类似，就不重复展开。
若有兴趣，您可以狠狠地点击这里：DOM prepend()节点API方法demo
对demo因为上的按钮乱点一通之后，会发现所有插入内容都在最前面显示：

文章图片

在以前要想在元素节点的最前面插入内容，要么使用insertBefore()找firstChild，要么使用insertAdjacentHTML()或者insertAdjacentElement()方法，都很啰嗦。
prepend()这个api要更简单和直接。
兼容性和before()一模一样，对于IE9+支持项目，可以辅助下面的polyfill：

// 源自： https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md (function (arr) { arr.forEach(function (item) { if (item.hasOwnProperty(‘prepend‘)) { return; } Object.defineProperty(item, ‘prepend‘, { configurable: true, enumerable: true, writable: true, value: function prepend() { 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.insertBefore(docFrag, this.firstChild); } }); }); })([Element.prototype, Document.prototype, DocumentFragment.prototype]);

5. DOM API之append()其语法如下：

ParentNode.append((节点或字符串)... 更多节点);

表示在当前节点的最后面插入其它节点内容（作为子节点）。其意思和jQuery中的append() API是一样的，细节上就是不支持html字符串直接显示的差别。
您可以狠狠地点击这里：DOM append()节点API方法demo
所有点击按钮插入内容都在图片后面，也就是容器里面的最后显示：

文章图片

polyfill如下：

// 源自： https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md (function (arr) { arr.forEach(function (item) { if (item.hasOwnProperty(‘append‘)) { return; } Object.defineProperty(item, ‘append‘, { configurable: true, enumerable: true, writable: true, value: function append() { 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.appendChild(docFrag); } }); }); })([Element.prototype, Document.prototype, DocumentFragment.prototype]);

三、结束语
我们为什么使用jQuery，一是DOM API的便利性，二是内部帮我们搞定了很多兼容性问题，三是友好地扩展和插件机制。
如今，原生的DOM API借鉴jQuery的优点，也整出了很多简单遍历的API方法；如果我们再粘贴一些polyfill JS搞定兼容性问题；再配合ES5很多数据处理方法；DOM leave 3的事件处理等。
基本上就没有需要使用jQuery的理由了，省了资源加载，提高了代码性能，还装了回哔哩哔哩。
所以，基本上，已经不可逆地，在不久将来，不出几年，行业会兴起原生DOM API，原生JS开发前端应用的小风尚，jQuery会越来越不被人提起，完成其历史使命，日后可以领取个终身成就奖。
另外，还有类jQuery的API本文没有介绍，例如Node.remove()，这个API出现相对要早一些，和前面介绍的不是一波出来的，因此没放到一起介绍。