JQueryの追加要素、削除要素

1.jQueryの要素作成方法

let div = $('
elm
');

$('elm')はdiv要素を作成し、内容はelmです.

2.要素の追加

2.1.内部追加append(),prepend()メソッド

    
   


    $(function() {
        let li = $('<li>   </li>');
        $('ul').append(li);
    });

append()メソッドは、元のJSのappendChild()のように、一致する要素の一番後ろに要素を追加します.

    
   


    $(function() {
        let li = $('<li>   </li>');
        $('ul').prepend(li);
    });

prepend()メソッドは、元のJSのinsertBefore()のような一致する要素の先頭に要素を追加します.
内部に要素を追加すると、親子関係が生成されます.

2.2.外部before()、after()メソッドの追加

   

    $(function() {
        let div = $('<div>   </div>');
        $('div').before(div);
    })

before()メソッドは、一致する要素の前に要素を追加します.

   

    $(function() {
        let div = $('<div>   </div>');
        $('div').after(div);
    })

after()メソッドは、一致する要素の後ろに要素を追加します.
外部に要素を追加し、兄弟関係を生成します.

2.要素の削除

1.remove()

    



    $(function() {
        $('ul').remove();
    })

remove()は、サブノードを含むul要素を削除します.
2.empty()

    



    $(function() {
        $('ul').empty();
    })

Empty()はulノード内のすべてのサブノードを空にしますが、ul自体のノードは保持されます.
3.html("")
html(")メソッドがempty()に作用するのはほぼ一致する