insertAdjacentHTML not adding before beforeend

Question

So I have been working on the script that when a user clicks the + button it adds a new button before the addnew div.

From my understanding I have followed the right setup to set up a insertAdjacentHTML

https://codepen.io/russellharrower/pen/rzxLRj

html

<!-- on Morph FAB Display -->
<div id="newpetprofiles" class="fixed-action-btn">

  <!-- beforebegin -->  
  <div id="overlay" class="blue-grey hidden">  
   <div id="form">
 DEPENDING ON IF IT IS THE ADD BUTTON OR A IMAGE OF THEIR KID A DIFFENT FORM SHOULD SHOW.
</div>
  </div>


   <!-- afterbegin -->
  <div class="btn-floating btn-large blue waves-effect waves-light">
    <img src="https://ipet.xyz/template/images/russellharrower.jpg"/>
  </div>
   <!-- beforeend -->
  <div id="addnew" name"addnew" class="btn-floating btn-large blue waves-effect waves-light">
    <i class="material-icons">
    add
  </i>
  </div>
  <!-- afterend -->
</div>

JS

$('div.btn-floating').click(function () {
 //alert(this.id);
 if(this.id === "addnew"){  

 dl= document.getElementById("newpetprofiles")
dl.insertAdjacentHTML('beforeend','<div class="btn-floating btn-large blue waves-effect waves-light"><img src="https://ipet.xyz/template/images/russellharrower.jpg"/></div>');

 }

  var morphFAB = $('#overlay');
  morphFAB.toggleClass('visible hidden');
  if (morphFAB.hasClass('visible')) {
    $('#form').addClass('animated slideInUp');
  }else {
    $('#form').removeClass('animated slideInUp');
  }
})

What is the exact problem? – Maciej Kwas Aug 10 '17 at 01:43 — Maciej Kwas, Aug 10 '17 at 01:43
I got it working by using afterbegin – RussellHarrower Aug 10 '17 at 01:44 — RussellHarrower, Aug 10 '17 at 01:44

score 0 · Answer 1 · answered Aug 10 '17 at 01:49

You've got the positions wrong - see the comments in the code below for the correct positions for insertAdjacentHtml:

<!-- on Morph FAB Display -->
<!-- beforebegin --> 
<div id="newpetprofiles" class="fixed-action-btn">
   <!-- afterbegin -->
  <div id="overlay" class="blue-grey hidden">  
   <div id="form">
 DEPENDING ON IF IT IS THE ADD BUTTON OR A IMAGE OF THEIR KID A DIFFENT FORM SHOULD SHOW.
</div>
  </div>
  <div class="btn-floating btn-large blue waves-effect waves-light">
    <img src="https://ipet.xyz/template/images/russellharrower.jpg"/>
  </div>
  <div id="addnew" name"addnew" class="btn-floating btn-large blue waves-effect waves-light">
    <i class="material-icons">
    add
  </i>
  </div>
  <!-- beforeend -->
</div>
<!-- afterend -->

insertAdjacentHTML not adding before beforeend

1 Answers1