我们为什么使用 jQuery,一是 DOM API 的便利性,二是内部帮我们搞定了很多兼容性问题,三是友好地扩展和插件机制。
更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏
如今,原生的 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">插入“<strong>美女</strong>”</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 出现相对要早一些,和前面介绍的不是一波出来的,因此没放到一起介绍。
作用如其名,移除当前节点。
【注:本文源自网络文章资源,由站长整理发布】