javascript - ページを更新せずに1つのセルを追加するjquery

Question

追加ボタンをクリックするたびに、セクションに 1 つのセルを追加したいと考えています。ページは更新せずに更新されます。html コードは次のとおりです。

<section>
  <p class="cell">content</p>
</section>
<button type="button" id="addCell">add</button>

js をどのように実装すればよいですか?ありがとう!

Answer 1

非常にシンプル、使用append()またはafter()。あなたの場合append()はもっとうまくいくでしょう。

$('#addCell').bind('click',function(){
    $('section').append('<p class="cell">content2</p>');
});

残念ながら、jsFiddleはメンテナンス中であるため、デモを表示することはできません。

jsbinのデモ：http：//jsbin.com/agosap/

Answer 2

$(document).ready(function() {
    $("#addCell").click(function() {
         $("section").append('<p class="cell">content</p>');
    });
});

Answer 3

あなたが試みたことを私たちに示していないので、私はあなたにコードを与えませんが、私はあなたを案内します。

クリックイベントをボタンにバインドして、ユーザーがクリックしたときに何かを実行できるようにします。JSdocument.createElementまたはjQueryを使用して要素を作成できます。したがって、クリックイベント内で、必要な要素を作成し、必要な属性を指定してから、親divに追加します。