{"id":2071,"date":"2017-10-13T10:10:16","date_gmt":"2017-10-13T10:10:16","guid":{"rendered":"http:\/\/www.xttblog.com\/?p=2071"},"modified":"2017-10-13T10:58:07","modified_gmt":"2017-10-13T02:58:07","slug":"%e9%9d%a0%e6%8e%92%e7%85%a7%e7%89%87%e5%92%8c%e6%8b%8d%e8%a7%86%e9%a2%91%e5%81%9a%e5%88%b0%e6%9c%88%e5%85%a510%e4%b8%87-5","status":"publish","type":"post","link":"https:\/\/www.xttblog.com\/?p=2071","title":{"rendered":"ES\uff08ECMAScript\uff09\u4e2dDOM API\u4e4bafter()"},"content":{"rendered":"

\n\tafter()\u548cbefore()\u7684\u8bed\u6cd5\u7279\u6027\u517c\u5bb9\u6027\u90fd\u662f\u4e00\u4e00\u5bf9\u5e94\u7684\uff0c\u5dee\u522b\u5c31\u5728\u4e8e\u8bed\u4e49\u4e0a\uff0c\u4e00\u4e2a\u662f\u5728\u524d\u9762\u63d2\u5165\uff0c\u4e00\u4e2a\u662f\u5728\u540e\u9762\u63d2\u5165\u3002\u4ed6\u4eec\u7684\u8bed\u6cd5\u975e\u5e38\u7c7b\u4f3c\u3002\n<\/p>\n

\n\t\u4e0b\u9762\u6211\u4eec\u901a\u8fc7\u4e00\u4e2a\u5b8c\u6574\u7684\u5b9e\u4f8b\u6765\u641e\u5b9a\u5b83\u3002\n<\/p>\n

\n\tHTML\u4ee3\u7801\uff1a\n<\/p>\n

\r\n<img id="img" src="mm0.jpg">\r\n<p><button id="afterText">\u56fe\u7247\u540e\u9762\u63d2\u5165\u6587\u5b57“\u7f8e\u5973”<\/button><\/p>\r\n<p><button id="afterHtml">\u56fe\u7247\u540e\u9762\u63d2\u5165“&lt;strong&gt;\u7f8e\u5973&lt;\/strong&gt;”<\/button><\/p>\r\n<p><button id="afterElement">\u56fe\u7247\u540e\u9762\u63d2\u5165“\u7f8e\u5973”\u6807\u9898<\/button><\/p>\r\n<p><button id="afterMultiple">\u56fe\u7247\u540e\u9762\u4e00\u6b21\u6027\u63d2\u5165\u591a\u6bb5\u5185\u5bb9<\/button><\/p><\/pre>\n
\n\tJS\u4ee3\u7801\uff1a\n<\/p>\n
\r\nvar eleImg = document.getElementById('img');\r\n\/\/ \u6d4b\u8bd5\u6309\u94ae\r\nvar eleBtnAfterText = document.getElementById('afterText');\r\nvar eleBtnAfterHtml = document.getElementById('afterHtml');\r\nvar eleBtnAfterElement = document.getElementById('afterElement');\r\nvar eleBtnAfterMultiple = document.getElementById('afterMultiple');\r\n\/\/ \u70b9\u51fb\u6309\u94ae\r\n\/\/ \u7eaf\u6587\u672c\u6d4b\u8bd5\r\neleBtnAfterText.addEventListener('click', function () {\r\n    eleImg.after('\u7f8e\u5973');    \r\n});\r\n\/\/ html\u5b57\u7b26\u4e32\u6d4b\u8bd5\r\neleBtnAfterHtml.addEventListener('click', function () {\r\n    eleImg.after('<strong>\u7f8e\u5973<\/strong>');    \r\n});\r\n\/\/ DOM\u8282\u70b9\u6d4b\u8bd5\r\neleBtnAfterElement.addEventListener('click', function () {\r\n    var eleTitle = document.createElement('h4');\r\n    eleTitle.innerHTML = '\u7f8e\u5973';\r\n    eleImg.after(eleTitle);    \r\n});\r\n\/\/ \u591a\u53c2\u6570\u6d4b\u8bd5\r\neleBtnAfterMultiple.addEventListener('click', function () {\r\n    eleImg.after('1. \u7f8e\u5973', ' ', '2. \u7f8e\u5973');    \r\n});<\/pre>\n
\n\t\u8fd0\u884c\u6548\u679c\uff1a\n<\/p>\n
\n\t\"DOM\n<\/p>\n
\n\t\u7136\u540e\u4e0b\u9762\u7684JS\u4ee3\u7801\u662f\u5bf9after() API\u7684polyfill\uff0c\u540c\u6837\u5730\uff0c\u81f3\u5c11IE9+\u6d4f\u89c8\u5668\u3002\n<\/p>\n
\r\n\/\/\u6e90\u81ea https:\/\/github.com\/jserz\/js_piece\/blob\/master\/DOM\/ChildNode\/after()\/after().md\r\n(function (arr) {\r\n  arr.forEach(function (item) {\r\n    if (item.hasOwnProperty('after')) {\r\n      return;\r\n    }\r\n    Object.defineProperty(item, 'after', {\r\n      configurable: true,\r\n      enumerable: true,\r\n      writable: true,\r\n      value: function after() {\r\n        var argArr = Array.prototype.slice.call(arguments),\r\n          docFrag = document.createDocumentFragment();\r\n        \r\n        argArr.forEach(function (argItem) {\r\n          var isNode = argItem instanceof Node;\r\n          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));\r\n        });\r\n        \r\n        this.parentNode.insertBefore(docFrag, this.nextSibling);\r\n      }\r\n    });\r\n  });\r\n})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);\r\n<\/pre>\n
\"\u4e1a\u4f59\u8349\u516c\u4f17\u53f7\"\/<\/p>
\u6700\u540e\uff0c\u6b22\u8fce\u5173\u6ce8\u6211\u7684\u4e2a\u4eba\u5fae\u4fe1\u516c\u4f17\u53f7\uff1a\u4e1a\u4f59\u8349\uff08yyucao\uff09\uff01\u53ef\u52a0\u4f5c\u8005\u5fae\u4fe1\u53f7\uff1axttblog2<\/font>\u3002\u5907\u6ce8\uff1a\u201c1\u201d\uff0c\u6dfb\u52a0\u535a\u4e3b\u5fae\u4fe1\u62c9\u4f60\u8fdb\u5fae\u4fe1\u7fa4\u3002\u5907\u6ce8\u9519\u8bef\u4e0d\u4f1a\u540c\u610f\u597d\u53cb\u7533\u8bf7\u3002<\/b>\u518d\u6b21\u611f\u8c22\u60a8\u7684\u5173\u6ce8\uff01\u540e\u7eed\u6709\u7cbe\u5f69\u5185\u5bb9\u4f1a\u7b2c\u4e00\u65f6\u95f4\u53d1\u7ed9\u60a8\uff01\u539f\u521b\u6587\u7ae0\u6295\u7a3f\u8bf7\u53d1\u9001\u81f3532009913@qq.com\u90ae\u7bb1\u3002\u5546\u52a1\u5408\u4f5c\u4e5f\u53ef\u6dfb\u52a0\u4f5c\u8005\u5fae\u4fe1\u8fdb\u884c\u8054\u7cfb\uff01<\/p>
\u672c\u6587\u539f\u6587\u51fa\u5904\uff1a\u4e1a\u4f59\u8349<\/a>\uff1a » ES\uff08ECMAScript\uff09\u4e2dDOM API\u4e4bafter()<\/a><\/p>","protected":false},"excerpt":{"rendered":"
after()\u548cbefore()\u7684\u8bed\u6cd5\u7279\u6027\u517c\u5bb9\u6027\u90fd\u662f\u4e00\u4e00\u5bf9\u5e94\u7684\uff0c\u5dee\u522b\u5c31\u5728\u4e8e\u8bed\u4e49\u4e0a\uff0c\u4e00\u4e2a\u662f\u5728\u524d\u9762\u63d2\u5165\uff0c\u4e00\u4e2a\u662f\u5728\u540e […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[814,1379,119,1106],"class_list":["post-2071","post","type-post","status-publish","format-standard","hentry","category-html5","tag-css3","tag-es6","tag-html5","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/2071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2071"}],"version-history":[{"count":1,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/2071\/revisions"}],"predecessor-version":[{"id":2144,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=\/wp\/v2\/posts\/2071\/revisions\/2144"}],"wp:attachment":[{"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xttblog.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}