insertAdjacentHTML 未在 beforeend 之前添加答案

【问题标题】：insertAdjacentHTML not adding before beforeendinsertAdjacentHTML 未在 beforeend 之前添加
【发布时间】：2018-01-18 01:44:11
【问题描述】：

所以我一直在编写脚本，当用户单击 + 按钮时，它会在 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>

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

【问题讨论】：

究竟是什么问题？
我使用 afterbegin 让它工作了

标签： javascript jquery insertadjacenthtml

【解决方案1】：

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

【讨论】：