【JavaScript】要素の追加と要素の削除を行う方法

今回はjavascriptで要素の追加や要素の削除をする方法を紹介します。

javascriptで要素を追加したい

特定の要素の前に追加する（insertBefore)

insertBeforeの基本構文は下記になります。

insertBefore(挿入するタグ, 挿入位置の前にある要素); 

insertBeforeを使用することで特定の要素の前に追加することができます。

javascriptで要素を削除したい

要素を削除する（remove）

removeメソッドの基本構文は下記になります。

elem.remove();

removeメソッドを使うことで要素の削除をすることができます。

要素の追加と削除

html

<div class="wrap">
        <div class="add"></div>
        <div id="remove1">getElementByIdで要素を削除</div>
        <p class="text">querySelectorで要素を削除</p>
</div>

javascript

//要素の追加
let addElem = document.createElement('h2');    
let elem = document.querySelector('div.add');
let parentElem = document.querySelector('div.wrap');   
parentElem.insertBefore(addElem, elem);
       
let elem_h2 = document.querySelector('h2');    
elem_h2.textContent = 'h2の要素です';       

//要素の削除
let elem1 = document.getElementById('remove1');
elem1.remove();
       
let elem2 = document.querySelector('p.text');
elem2.remove();

サンプル