insertAdjacentHTML beforewardendの前に追加しない

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

を設定する権限設定を踏襲しています - correcについては、以下のコードのコメントを参照してください。 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 -->