insertAdjacentHTML不在之前添加

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

你已经得到了错误的位置 - 请参阅以下代码中关于更正的评论t的位置为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 -->