htmlの動的divの追加と削除

Question

私はウェブサイトを構築しようとしています。ユーザーがコメントを投稿するためのオプションがあります。 私はintial fetchにいくつかの（例えば5つの）コメントと、より多くのコメントをロードするオプションを表示することを計画しています。 jqueryを使用しており、コメントの数に基づいて動的にHTML divを動的に作成しようと考えていました。これがベストアイデアですか？

また、ダイナミックに作成された要素を削除して、ページへの再入力時に静的要素のみを持ち、必要に応じて動的要素を添付する方法はありますか？

Answer 1

jQueryは、DOM要素を動的に作成する方法に関するいくつかの便利なツールを提供します。新しい要素を挿入するには、.append()メソッドを使用します。

たとえば、あなたがあなたのコメントのすべてのコンテナとHTMLの構造を持っていた、といくつかのコメントすでに言う：

<div id="comments_container"> 
    <div class="comment"> 
     This is a comment! 
    </div> 
    <div class="comment"> 
     This is another comment! 
    </div> 
    <div class="comment"> 
     Comment 3! 
    </div> 
</div> 

あなたが動的に多くのコメントを追加するには、次のコードを使用することができます。

$("#comments_container").append('<div class="container">'+comment_data+'</div>'); 

動的に追加された新しいコメントはすべて、コメント<div>の下に表示されます。コメントコンテナの先頭にコメントを追加する場合は、append()の代わりにprepend()を使用します。

また、ダイナミックに作成された要素を削除して、ページへの再入力時に静的な要素のみを持ち、必要に応じて動的な要素を追加する方法はありますか？

はい。 prepend()とappend()を使用して動的に挿入された要素は、ユーザーがページを再読み込みまたは再訪すると消えます。