Appendがコンテンツを複製しています

Question

私のコードにコンテンツを追加しようとしています。ボタンを押すと、jQueryが再び実行され、もう一度追加されます。だから私の質問は、コードが1回だけ実行されることを確認する方法はありますか？または一度だけ追加する方法がある場合は？

$(document).ready(function() { 
    var uspar = '<div id="usparDiv"><img src="https://example.com"><ul><li>list 1</li><li>list 2</li><li>list 3</li></ul></div>'; 
    $('.extend-guarantee').append(uspar); 
}); 



<form class="extend-guarantee"> 
    <span class="checkbox"> 
    <input type="checkbox"> 
    <span class="opt-name">Testing checkbox</span> 
    <span class="icon-click"></span> 
    </span> 

Answer 1

私が正しくあなたの質問を理解していた場合、あなたはこのような何かを試すことができます。

以下のコードでは、appendToDomという関数を作成します。ボタンをクリックしてusparDivのIDを持つdivとそのすべての内容（関数で定義されているもの）をDOMに追加すると、この関数が呼び出されます（この場合、コンテンツはappendToDom ）。

appendToDom関数は、idがusparDivのdivが存在するかどうかをチェックすることで、コンテンツが1回だけ追加されることを確認することもできます。実行されている場合は、実行を返して終了します。そうでなければ、divにDOMを追加します。

https://jsfiddle.net/eulloa/2a3ee3te/

$(document).ready(function() { 
    $('button').on('click', appendToDom) 
}); 

function appendToDom() { 
    if ($('#usparDiv').length) 
    return; 

    var uspar = '<div id="usparDiv"><img src="https://example.com"><ul><li>list 1</li><li>list 2</li><li>list 3</li></ul></div>'; 
    $('main').append(uspar); 
} 

DOMは（document.readyを）行く準備ができているとき、それは定義されているため現在のjQueryのコードは一度だけこれを実行します。このように、追加ロジックは、DOMの準備ができたときだけでなく、ボタンがクリックされたときにも機能します。