• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

ES(ECMAScript)中DOM API之prepend()

JAVA web前端中文站 3年前 (2017-09-29) 1140次浏览 已收录 0个评论

国企期间将不会再更新文章了,会出去旅游!所以这两天将抓紧时间更新几篇!

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

今天我们继续更新关于 DOM API 的新内容,新增的方法 prepend()。

prepend() 的其语法如下:

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

表示在当前节点的最前面插入其它节点内容(作为子节点)。其意思和 jQuery 中的 prepend() API 是一样的,对 jQuery 熟悉的人学习这几个 API 都是分分钟的事情。

参数值特性什么的和 before(), after()等方法类似,就不重复展开。下面我们直接进入 demo。

HTML 代码:

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

JS 代码:

 var eleBox = document.getElementById('img'); // 测试按钮 var eleBtnPrependText = document.getElementById('prependText'); var eleBtnPrependHtml = document.getElementById('prependHtml'); var eleBtnPrependElement = document.getElementById('prependElement'); var eleBtnPrependMultiple = document.getElementById('prependMultiple'); // web 前端中文站:www.lisa33xiaoq.net // 点击按钮 // 纯文本测试 eleBtnPrependText.addEventListener('click', function () {     eleBox.prepend('美女');     }); // html 字符串测试 eleBtnPrependHtml.addEventListener('click', function () {     eleBox.prepend('<strong>美女</strong>');     }); // DOM 节点测试 eleBtnPrependElement.addEventListener('click', function () {     var eleTitle = document.createElement('h4');     eleTitle.innerHTML = '美女';     eleBox.prepend(eleTitle);     }); // 多参数测试 eleBtnPrependMultiple.addEventListener('click', function () {     eleBox.prepend('1. 美女', ' ', '2. 美女');     });

运行效果:

对 demo 因为上的按钮乱点一通之后,会发现所有插入内容都在最前面显示:

ES(ECMAScript)中 DOM API 之 prepend()

在以前要想在元素节点的最前面插入内容,要么使用 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]); 

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


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:ES(ECMAScript)中 DOM API 之 prepend()
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址