{"id":217,"date":"2009-08-28T18:12:47","date_gmt":"2009-08-28T23:12:47","guid":{"rendered":"http:\/\/osric.com\/chris\/accidental-developer\/?p=217"},"modified":"2009-08-28T18:12:47","modified_gmt":"2009-08-28T23:12:47","slug":"javascript-insertafter","status":"publish","type":"post","link":"https:\/\/osric.com\/chris\/accidental-developer\/2009\/08\/javascript-insertafter\/","title":{"rendered":"Javascript insertAfter()"},"content":{"rendered":"<p>There is no <em>Node.insertAfter()<\/em> DOM function in Javascript, but it is clearly something that developers would like.<\/p>\n<p>As the <a href=\"https:\/\/developer.mozilla.org\/en\/Gecko_DOM_Reference\">Gecko DOM Reference<\/a> for <a href=\"https:\/\/developer.mozilla.org\/En\/DOM\/Node.insertBefore\">Node.insertBefore()<\/a> points out, this can easily be achieved with<br \/>\n<code>parentDiv.insertBefore(nodeToInsert, nodeToInsertAfter.nextSibling);<\/code><\/p>\n<p>If <em>nodeToInsertAfter<\/em> doesn&#8217;t have a next sibling, a NULL value will be returned and <em>nodeToInsert<\/em> will be inserted as the last child of <em>parentDiv<\/em>.<\/p>\n<p>If you find it frustrating to type <em>insertBefore<\/em> when you want to <em>insertAfter<\/em>, that&#8217;s OK: you can add that function to the Object object:<br \/>\n<code>Object.prototype.insertAfter = function (newNode) { this.parentNode.insertBefore(newNode, this.nextSibling); }<\/code><\/p>\n<p>Now you can type:<br \/>\n<code>nodeToInsertAfter.insertAfter(nodeToInsert)<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Although Javascript doesn&#8217;t contain a DOM function for Node.insertAfter(), you can easily emulate it using Node.insertBefore &#8212; and even call it via Node.insertAfter()<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[97,98,99,350],"class_list":["post-217","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-dom","tag-insertafter","tag-insertbefore","tag-javascript"],"_links":{"self":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts\/217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/comments?post=217"}],"version-history":[{"count":1,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts\/217\/revisions"}],"predecessor-version":[{"id":218,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts\/217\/revisions\/218"}],"wp:attachment":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/media?parent=217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/categories?post=217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/tags?post=217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}