javascript - insertAdjacentHTML不在beforeend之前添加

因此，我一直在研究脚本，当用户单击+按钮时，它将在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');
  }
})

最佳答案

您的位置有误-请参见以下代码中的注释，以获取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 -->