How can I implement prepend and append with regular JavaScript

Question

How can I implement prepend and append with regular JavaScript without using jQuery

User · Answer

In 2017 I know for Edge 15 and IE 12  the prepend method isn t included as a property for Div elements  but if anyone needs a quick reference to polyfill a function I made this    HTMLDivElement prototype prepend    node  ele   gt                   try   node insertBefore ele  node children 0                           catch  e   throw new Error e toString          Simple arrow function that s compatible with most modern browsers

User · Answer

You didn t give us much to go on here  but I think you re just asking how to add content to the beginning or end of an element  If so here s how you can do it pretty easily     get the target div you want to append prepend to var someDiv   document getElementById  targetDiv       append text someDiv innerHTML     Add this text to the end      prepend text someDiv innerHTML    Add this text to the beginning    someDiv innerHTML    Pretty easy

User · Answer

You can also use unshift   to prepend to a list

User · Answer

If you want to insert a raw HTML string no matter how complex  you can use   insertAdjacentHTML  with appropriate first argument       beforebegin     Before the element itself     afterbegin     Just inside the element  before its first child      beforeend     Just inside the element  after its last child      afterend     After the element itself    Hint  you can always call Element outerHTML to get the HTML string representing the element to be inserted   An example of usage   document getElementById  foo   insertAdjacentHTML  beforeBegin               lt div gt  lt h1 gt I lt  h1 gt  lt h2 gt was lt  h2 gt  lt h3 gt inserted lt  h3 gt  lt  div gt       DEMO  Caution  insertAdjacentHTML does not preserve listeners that where attached with  addEventLisntener

User · Answer

In order to simplify your life you can extend the HTMLElement object  It might not work for older browsers  but definitely makes your life easier   HTMLElement   typeof HTMLElement      undefined    HTMLElement   Element   HTMLElement prototype prepend   function element        if  this firstChild            return this insertBefore element  this firstChild         else           return this appendChild element              So next time you can do this   document getElementById  container   prepend document getElementById  block        or var element   document getElementById  anotherElement    document body prepend div

User · Answer

Perhaps you re asking about the DOM methods appendChild and insertBefore   parentNode insertBefore newChild  refChild       Inserts the node newChild as a child of parentNode before the   existing child node refChild   Returns newChild        If refChild is null  newChild is added at the end of the list of   children  Equivalently  and more readably  use   parentNode appendChild newChild

User · Answer

var insertedElement   parentElement insertBefore newElement  referenceElement     If referenceElement is null  or undefined  newElement is inserted at the end of the list of child nodes   insertedElement The node being inserted  that is newElement parentElement The parent of the newly inserted node  newElement The node to insert  referenceElement The node before which newElement is inserted    Examples can be found here  Node insertBefore

User · Answer

Here s an example of using prepend to add a paragraph to the document   var element   document createElement  p    var text   document createTextNode  Example text    element appendChild text   document body prepend element     result     lt p gt Example text lt  p gt

User · Answer

I added this on my project and it seems to work   HTMLElement prototype prependHtml   function  element        const div   document createElement  div        div innerHTML   element      this insertBefore div  this firstChild       HTMLElement prototype appendHtml   function  element        const div   document createElement  div        div innerHTML   element      while  div children length  gt  0            this appendChild div children 0               Example   document body prependHtml   lt a href     gt Hello World lt  a gt     document body appendHtml   lt a href     gt Hello World lt  a gt

User · Answer

This is not best way to do it but if anyone wants to insert an element before everything  here is a way   var newElement   document createElement  div    var element   document getElementById  targetelement    element innerHTML     lt div style  display none  important   gt  lt  div gt     element innerHTML  var referanceElement   element children 0   element insertBefore newElement referanceElement   element removeChild referanceElement

User · Answer

Here s a snippet to get you going   theParent   document getElementById  theParent    theKid   document createElement  div    theKid innerHTML    Are we there yet        append theKid to the end of theParent theParent appendChild theKid       prepend theKid to the beginning of theParent theParent insertBefore theKid  theParent firstChild     theParent firstChild will give us a reference to the first element within theParent and put theKid before it

[javascript] How can I implement prepend and append with regular JavaScript?

Examples related to javascript

Examples related to append

Examples related to prepend