javascript - insertAdjacentHTML 未在 beforeend 之前添加

Question

所以我一直在编写脚本，当用户单击 + 按钮时，它会在 addnew div 之前添加一个新按钮。

根据我的理解，我遵循了正确的设置来设置 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');
  }
})

Answer 1

您的位置错误 - 请参阅下面代码中的注释，了解 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 -->