Javascript INSERTADJACENTHML未在BEFOREND之前添加

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

据我所知，我已经按照正确的设置设置了insertAdjacentHTML

html

根据是“添加”按钮还是孩子的图像，应该显示不同的表单。
添加

JS

$（'div.btn-floating'）。单击（函数（）{
//警报（this.id）；
如果（this.id==“addnew”）{
dl=document.getElementById（“newpetprofiles”）
dl.insertAdjacentHTML（'beforeed'，''）；
}
var morphFAB=$（“#覆盖”）；
morphFAB.toggleClass（'visible hidden'）；
if（morphFAB.hasClass（'visible'））{
$（'#form'）.addClass（'animated slideInUp'）；
}否则{
$（'#form'）.removeClass（'animated slideInUp'）；
}
})

您的位置有误-请参阅下面代码中的注释，以了解正确的位置：

根据是“添加”按钮还是孩子的图像，应该显示不同的表单。
添加

您的位置有误-请参阅下面代码中的注释，以了解正确的位置：

根据是“添加”按钮还是孩子的图像，应该显示不同的表单。
添加

确切的问题是什么？我使用afterbegin使其正常工作确切的问题是什么？我使用afterbegin使其正常工作

<!-- 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>

$('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');
  }
})

<!-- 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 -->