How to insert an element after another element in JavaScript without using a library

Question

There s insertBefore   in JavaScript  but how can I insert an element after another element without using jQuery or another library

User · Answer

a robust implementation of insertAfter      source  https   github com jserz domPlus blob master src insertAfter   insertAfter js Node prototype insertAfter   Node prototype insertAfter    function  newNode  referenceNode      function isNode node        return node instanceof Node         if arguments length  lt  2       throw new TypeError  Failed to execute  insertAfter  on  Node   2 arguments required  but only    arguments length    present             if isNode newNode        if referenceNode     null    referenceNode     undefined         return this insertBefore newNode  referenceNode              if isNode referenceNode          return this insertBefore newNode  referenceNode nextSibling              throw new TypeError  Failed to execute  insertAfter  on  Node   parameter 2 is not of type  Node              throw new TypeError  Failed to execute  insertAfter  on  Node   parameter 1 is not of type  Node

User · Answer

Straightforward JavaScript Would Be the Following   Append Before   element parentNode insertBefore newElement  element     Append After   element parentNode insertBefore newElement  element nextSibling       But  Toss Some Prototypes In There For Ease of Use  By building the following prototypes  you will be able to call these function directly from newly created elements     newElement appendBefore element    newElement appendAfter element      appendBefore element  Prototype  Element prototype appendBefore   function  element      element parentNode insertBefore this  element     false     appendAfter element  Prototype  Element prototype appendAfter   function  element      element parentNode insertBefore this  element nextSibling     false      And  To See It All In Action  Run the Following Code Snippet   x000D   x000D     Adds Element BEFORE NeighborElement    x000D  Element prototype appendBefore   function element    x000D    element parentNode insertBefore this  element   x000D     false  x000D   x000D     Adds Element AFTER NeighborElement    x000D  Element prototype appendAfter   function element    x000D    element parentNode insertBefore this  element nextSibling   x000D     false  x000D   x000D   x000D     Typical Creation and Setup A New Orphaned Element Object    x000D  var NewElement   document createElement  div    x000D  NewElement innerHTML    New Element   x000D  NewElement id    NewElement   x000D   x000D   x000D     Add NewElement BEFORE -OR- AFTER Using the Aforementioned Prototypes    x000D  NewElement appendAfter document getElementById  Neighbor2     x000D  div   x000D    text-align  center  x000D    x000D   Neighborhood   x000D    color  brown  x000D    x000D   NewElement   x000D    color  green  x000D    x000D   lt div id  Neighborhood  gt  x000D     lt div id  Neighbor1  gt Neighbor 1 lt  div gt  x000D     lt div id  Neighbor2  gt Neighbor 2 lt  div gt  x000D     lt div id  Neighbor3  gt Neighbor 3 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Run it on JSFiddle

User · Answer

A quick Google search reveals this script     create function  it expects 2 values  function insertAfter newElement targetElement           target is what you want it to go after  Look for this elements parent      var parent   targetElement parentNode          if the parents lastchild is the targetElement        if  parent lastChild    targetElement               add the newElement after the target element          parent appendChild newElement         else              else the target has siblings  insert the new element between the target and it s next sibling          parent insertBefore newElement  targetElement nextSibling

User · Answer

Lets handle all the scenarios   function insertAfter newNode  referenceNode            if referenceNode  amp  amp  referenceNode nextSibling  amp  amp  referenceNode nextSibling nodeName      text               referenceNode   referenceNode nextSibling           if  referenceNode              document body appendChild newNode           else if  referenceNode nextSibling              document body appendChild newNode           else                         referenceNode parentNode insertBefore newNode  referenceNode nextSibling

User · Answer

You can actually a method called after   in newer version of Chrome  Firefox and Opera  The downside of this method is that Internet Explorer doesn t support it yet   Example      You could create a simple node var node   document createElement  p       And then get the node where you want to append the created node after var existingNode   document getElementById  id of the element       Finally you can append the created node to the exisitingNode existingNode after node    A simple HTML Code to test that is   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt body gt  x000D        lt p id  up  gt Up lt  p gt  x000D       lt p id  down  gt Down lt  p gt  x000D     lt button id  switchBtn  onclick  switch place    gt Switch place lt  button gt  x000D     lt script gt  x000D      function switch place    x000D        var downElement   document getElementById  down   x000D        var upElement   document getElementById  up   x000D        downElement after upElement   x000D        document getElementById  switchBtn   innerHTML    Switched   x000D        x000D     lt  script gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    As expected  it moves the up element after the down element

User · Answer

if   Element prototype insertAfter         Element prototype insertAfter   function item  reference            if  reference nextSibling               reference parentNode insertBefore item  reference nextSibling           else             reference parentNode appendChild item

User · Answer

Or you can simply do   referenceNode parentNode insertBefore  newNode  referenceNode   referenceNode parentNode insertBefore  referenceNode  newNode

User · Answer

referenceNode parentNode insertBefore newNode  referenceNode nextSibling     Where referenceNode is the node you want to put newNode after  If referenceNode is the last child within its parent element  that s fine  because referenceNode nextSibling will be null and insertBefore handles that case by adding to the end of the list   So   function insertAfter newNode  referenceNode        referenceNode parentNode insertBefore newNode  referenceNode nextSibling         You can test it using the following snippet    x000D   x000D  function insertAfter referenceNode  newNode    x000D    referenceNode parentNode insertBefore newNode  referenceNode nextSibling   x000D    x000D   x000D  var el   document createElement  span    x000D  el innerHTML    test   x000D  var div   document getElementById  foo    x000D  insertAfter div  el   x000D   lt div id  foo  gt Hello lt  div gt  x000D   x000D   x000D

User · Answer

This is the simplest way we can add an element after another one using vanilla javascript  var d1   document getElementById  one    d1 insertAdjacentHTML  afterend     lt div id  two  gt two lt  div gt       Reference  https   developer mozilla org en-US docs Web API Element insertAdjacentHTML

User · Answer

Step 1  Prepare Elements     var element   document getElementById  ElementToAppendAfter    var newElement   document createElement  div    var elementParent   element parentNode       Step 2  Append after     elementParent insertBefore newElement  element nextSibling

User · Answer

You can use appendChild function to insert after an element   Reference  http   www w3schools com jsref met node appendchild asp

User · Answer

Though insertBefore    see MDN  is great and referenced by most answers here  For added flexibility  and to be a little more explicit  you can use   insertAdjacentElement    see MDN  This lets you reference any element  and insert the to-be moved element exactly where you want    lt  -- refElem insertAdjacentElement  beforebegin   moveMeElem   -- gt   lt p id  refElem  gt       lt  -- refElem insertAdjacentElement  afterbegin   moveMeElem   -- gt          content          lt  -- refElem insertAdjacentElement  beforeend   moveMeElem   -- gt   lt  p gt   lt  -- refElem insertAdjacentElement  afterend   moveMeElem   -- gt    Others to consider for similar use cases  insertAdjacentHTML   and insertAdjacentText    References   https   developer mozilla org en-US docs Web API Element insertAdjacentElement https   developer mozilla org en-US docs Web API Element insertAdjacentHTML https   developer mozilla org en-US docs Web API Element insertAdjacentText

User · Answer

Ideally insertAfter should work similar to insertBefore  The code below will perform the following    If there are no children  the new Node is appended If there is no reference Node  the new Node is appended If there is no Node after the reference Node  the new Node is appended If there the reference Node has a sibling after  then the new Node is inserted before that sibling Returns the new Node   Extending Node  Node prototype insertAfter   function node  referenceNode         if  node          this insertBefore node  referenceNode  amp  amp  referenceNode nextSibling        return node       One common example  node parentNode insertAfter newNode  node     See the code running   x000D   x000D     First extend x000D  Node prototype insertAfter   function node  referenceNode    x000D       x000D      if  node  x000D          this insertBefore node  referenceNode  amp  amp  referenceNode nextSibling   x000D   x000D      return node  x000D     x000D   x000D  var referenceNode  x000D      newNode  x000D   x000D  newNode   document createElement  li   x000D  newNode innerText    First new item   x000D  newNode style color     FF0000   x000D   x000D  document getElementById  no-children   insertAfter newNode   x000D   x000D  newNode   document createElement  li    x000D  newNode innerText    Second new item   x000D  newNode style color     FF0000   x000D   x000D  document getElementById  no-reference-node   insertAfter newNode   x000D   x000D  referenceNode   document getElementById  no-sibling-after    x000D  newNode   document createElement  li    x000D  newNode innerText    Third new item   x000D  newNode style color     FF0000   x000D   x000D  referenceNode parentNode insertAfter newNode  referenceNode   x000D   x000D  referenceNode   document getElementById  sibling-after    x000D  newNode   document createElement  li    x000D  newNode innerText    Fourth new item   x000D  newNode style color     FF0000   x000D   x000D  referenceNode parentNode insertAfter newNode  referenceNode   x000D   lt h5 gt No children lt  h5 gt  x000D   lt ul id  no-children  gt  lt  ul gt  x000D   x000D   lt h5 gt No reference node lt  h5 gt  x000D   lt ul id  no-reference-node  gt  x000D     lt li gt First item lt  li gt  x000D   lt  ul gt  x000D   x000D   lt h5 gt No sibling after lt  h5 gt  x000D   lt ul gt  x000D     lt li id  no-sibling-after  gt First item lt  li gt  x000D   lt  ul gt  x000D   x000D   lt h5 gt Sibling after lt  h5 gt  x000D   lt ul gt  x000D     lt li id  sibling-after  gt First item lt  li gt  x000D     lt li gt Third item lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

I know this question has far too many answers already  but none of them met my exact requirements   I wanted a function that has the exact opposite behavior of parentNode insertBefore - that is  it must accept a null referenceNode  which the accepted answer does not  and where insertBefore would insert at the end of the children this one must insert at the start  since otherwise there d be no way to insert at the start location with this function at all  the same reason insertBefore inserts at the end   Since a null referenceNode requires you to locate the parent  we need to know the parent - insertBefore is a method of the parentNode  so it has access to the parent that way  our function doesn t  so we ll need to pass the parent as a parameter   The resulting function looks like this   function insertAfter parentNode  newNode  referenceNode      parentNode insertBefore      newNode      referenceNode   referenceNode nextSibling   parentNode firstChild          Or  if you must  I don t recommend it  you can of course enhance the Node prototype   if    Node prototype insertAfter      Node prototype insertAfter   function newNode  referenceNode        this insertBefore        newNode        referenceNode   referenceNode nextSibling   this firstChild

User · Answer

insertBefore   method is used like parentNode insertBefore    So to imitate this and make a method parentNode insertAfter   we can write the following code   JavaScript  Node prototype insertAfter   function newNode  referenceNode        return referenceNode parentNode insertBefore          newNode  referenceNode nextSibling      based on karim79 s solution        getting required handles var refElem   document getElementById  pTwo    var parent   refElem parentNode      creating  lt p gt paragraph three lt  p gt  var txt   document createTextNode  paragraph three    var paragraph   document createElement  p    paragraph appendChild txt       now we can call it the same way as insertBefore   parent insertAfter paragraph  refElem     HTML   lt div id  divOne  gt       lt p id  pOne  gt paragraph one lt  p gt       lt p id  pTwo  gt paragraph two lt  p gt   lt  div gt    Note  that extending the DOM might not be the right solution for You as stated in this article   Hovewer  this article was written in 2010 and things might be different now  So decide on Your own   JavaScript DOM insertAfter   method   jsfiddle net

User · Answer

2018 Solution  Bad Practice  go to 2020  I know this question is Ancient  but for any future users  heres a modified prototype this is just a micro polyfill for the  insertAfter function that doesnt exist this prototype directly adds a new function baseElement insertAfter element   to the Element prototype  Element prototype insertAfter   function new        this parentNode insertBefore new  this nextSibling      Once youve placed the polyfill in a library  gist  or just in your code  or anywhere else where it can be referenced  Just write document getElementById  foo   insertAfter document createElement  bar      2019 Solution  Ugly  go to 2020  You SHOULD NOT USE PROTOTYPES  They overwrite the default codebase and arent very efficient or safe and can cause compatibility errors  but if its for non-commercial projects  it shouldnt matter  if you want a safe function for commercial use  just use a default function  its not pretty but it works  function insertAfter el  newEl        el parentNode insertBefore newEl  this nextSibling         use  const el   document body    document querySelector  quot body quot       the    means  quot this OR that quot   el insertBefore document createElement  quot div quot    el nextSibling      Insert Before  insertAfter el  document createElement  quot div quot        Insert After    2020 Solution Current Web Standards for ChildNode  https   developer mozilla org en-US docs Web API ChildNode Its currently in the Living Standards and is SAFE  For Unsupported Browsers  use this Polyfill  https   github com seznam JAK blob master lib polyfills childNode js Someone mentioned that the Polyfill uses Protos  when I said they were bad practice  They are  especially when they are used blindly and overwrited  like with my 2018 solution  However  that polyfill is on the MDN Documentation and uses a kind of initialization and execution that is safer  How to use the 2020 Solution     Parent Element const el   document querySelector  quot  class quot        Create New Element const newEl   document createElement  quot div quot    newEl id    quot foo quot       Insert New Element BEFORE an Element el before newEl       Insert New Element AFTER an Element el after newEl       Remove an Element el remove        Even though it   s a created element     newEl is still a reference to the HTML     so using  remove   on it should work    if you have already appended it somewhere newEl remove

User · Answer

The method node after  doc  inserts a node after another node   For two DOM nodes node1 and node2   node1 after node2  inserts node2 after node1   This method is not available in older browsers  so usually a polyfill is needed

User · Answer

insertAdjacentHTML   outerHTML  elementBefore insertAdjacentHTML  afterEnd   elementAfter outerHTML    Upsides    DRYer  you don t have to store the before node in a variable and use it twice  If you rename the variable  on less occurrence to modify   golfs better than the insertBefore  break even if the existing node variable name is 3 chars long    Downsides    lower browser support since newer  https   caniuse com  feat insert-adjacent will lose properties of the element such as events because outerHTML converts the element to a string  We need it because insertAdjacentHTML adds content from strings rather than elements

User · Answer

This code is work to insert a link item right after the last existing child to inlining a small css file  var raf  cb function          create newnode     var link document createElement  link        link rel  stylesheet  link type  text css  link href  css style css          insert after the lastnode     var nodes document getElementsByTagName  link      existing nodes     var lastnode document getElementsByTagName  link   nodes length-1        lastnode parentNode insertBefore link  lastnode nextSibling         check before insert try       raf requestAnimationFrame           mozRequestAnimationFrame           webkitRequestAnimationFrame           msRequestAnimationFrame    catch err       raf false     if  raf raf cb   else window addEventListener  load  cb

[javascript] How to insert an element after another element in JavaScript without using a library?

Examples related to javascript

Examples related to dom

Examples related to insert

Examples related to append