ES（ECMAScript）中DOM API之append()

我们为什么使用jQuery，一是DOM API的便利性，二是内部帮我们搞定了很多兼容性问题，三是友好地扩展和插件机制。

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

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

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

append() 的语法也很简单。如下所示：

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

表示在当前节点的最后面插入其它节点内容（作为子节点）。其意思和jQuery中的append() API是一样的，细节上就是不支持html字符串直接显示的差别。

下面看一个demo。HTML代码：

 <div id="box">     <img src="mm0.jpg"> </div> <p><button id="appendText">插入文字“美女”</button></p> <p><button id="appendHtml">插入“&lt;strong&gt;美女&lt;/strong&gt;”</button></p> <p><button id="appendElement">插入“美女”标题</button></p> <p><button id="appendMultiple">一次性插入多段内容</button></p>

JS代码：

 var eleBox = document.getElementById('img'); // 测试按钮 var eleBtnAppendText = document.getElementById('appendText'); var eleBtnAppendHtml = document.getElementById('appendHtml'); var eleBtnAppendElement = document.getElementById('appendElement'); var eleBtnAppendMultiple = document.getElementById('appendMultiple');  // 点击按钮 // 纯文本测试 eleBtnAppendText.addEventListener('click', function () {     eleBox.append('美女');     }); // html字符串测试 eleBtnAppendHtml.addEventListener('click', function () {     eleBox.append('<strong>美女</strong>');     }); // DOM节点测试 eleBtnAppendElement.addEventListener('click', function () {     var eleTitle = document.createElement('h4');     eleTitle.innerHTML = '美女';     eleBox.append(eleTitle);     }); // 多参数测试 eleBtnAppendMultiple.addEventListener('click', function () {     eleBox.append('1. 美女', ' ', '2. 美女');     });

运行效果：

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的API本文没有介绍，例如Node.remove()，这个API出现相对要早一些，和前面介绍的不是一波出来的，因此没放到一起介绍。

作用如其名，移除当前节点。

【注：本文源自网络文章资源，由站长整理发布】

如无特殊说明，文章均为原作者原创，转载请注明出处