JavaScriptでは、DOMを操作する際に要素を追加・削除するためのメソッドとしてappendChild()とremoveChild()があります。今回は、これらの基本的な使い方や注意点についてまとめていきたいと思います。
appendChild()は、指定した要素を親要素の最後の子要素として追加するメソッドです。
JavaScript
// 親要素に子要素を追加
parentElement.appendChild(childElement);- parentElement：子要素を追加する親要素
- childElement：追加したい要素
以下は、ボタンをクリックすると、新しい段落（<p>要素）を追加する例です。
See the Pen appendChild / removeChild by tones (@tonescodedesign) on CodePen.
JavaScript
// 親要素を取得
const container = document.getElementById('container');
const addButton = document.getElementById('addButton');
// ボタンがクリックされたら要素を追加
addButton.addEventListener('click', () => {
const newParagraph = document.createElement('p'); // <p>要素を作成
newParagraph.textContent = '新しい段落です。'; // テキストを設定
container.appendChild(newParagraph); // 親要素に追加
console.log('要素が追加されました。');
});HTML
<div id="container"></div>
<button id="addButton">追加</button>removeChild()は、指定した要素を親要素から削除するメソッドです。
JavaScript
// 親要素から子要素を削除
parentElement.removeChild(childElement);- parentElement：子要素を削除する親要素
- childElement：削除したい要素
以下は、ボタンをクリックすると、最後に追加された段落を削除する例です。
See the Pen appendChild / removeChild by tones (@tonescodedesign) on CodePen.
JavaScript
// 親要素を取得
const container = document.getElementById('container');
const removeButton = document.getElementById('removeButton');
// ボタンがクリックされたら要素を削除
removeButton.addEventListener('click', () => {
if (container.lastChild) { // 最後の子要素がある場合
container.removeChild(container.lastChild); // 最後の子要素を削除
console.log('要素が削除されました。');
} else {
console.log('削除する要素がありません。');
}
});HTML
<div id="container">
<p>最初の段落</p>
</div>
<button id="removeButton">削除</button>appendChild()を使うと、既存の要素を別の親要素に追加することができます。ただし、同じ要素を複数回追加しようとすると、その要素は移動してしまいます。
removeChild()を使用するとき、削除対象の要素が親要素に含まれているか確認しましょう。存在しない要素を削除しようとするとエラーが発生します。
JavaScript
if (parentElement.contains(childElement)) {
parentElement.removeChild(childElement);
}appendChild()とremoveChild()は、DOM要素の追加・削除を行う基本的なメソッドです。以下の点に注意して使いましょう。
appendChild()は、既存の要素を別の親要素に移動させる。removeChild()を使う際は、削除対象の要素が存在するか確認する。
