3.1 要素の作成
DOM（Document Object Model）の操作には、既存の要素をナビゲートするだけでなく、新しい要素を作成してドキュメントに挿入したり、削除したりすることも含まれます。ここでは、DOMで要素を作成および削除するためのさまざまなメソッドやアプローチを見ていきます。
メソッド document.createElement()
DOMで新しい要素を作成するための基本的なメソッドはdocument.createElement()です。このメソッドは作成したい要素のタグ名を受け取り、新しい空の要素を返します。
例:
const newDiv = document.createElement('div');
要素にコンテンツを追加する
新しい要素を作成した後、それにコンテンツを追加することができます。テキストや他の要素、またはその組み合わせを追加できます。
例:
const newDiv = document.createElement('div');
newDiv.textContent = 'これは新しい div 要素です';
また、innerHTMLプロパティを使用してHTMLコンテンツを追加することもできます。
例:
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>これはボールドテキストを持つ新しい div 要素です</strong>';
3.2 DOMへの要素の挿入
作成した要素をドキュメントに追加する必要があります。DOMに要素を挿入するためのいくつかのメソッドがあります:
1. メソッド appendChild()
メソッドappendChild()は、指定された親要素の子要素リストの末尾に要素を追加します。
例:
<html>
<head>
<title>文書</title>
</head>
<body>
<div>これは古い div 要素です</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'これは新しい div 要素です';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. メソッド insertBefore()
メソッドinsertBefore()は、指定された親要素の子要素の前に要素を追加します。
例:
<html>
<head>
<title>文書</title>
</head>
<body>
<div>これは古い div 要素です</div>
<p>これは段落です</p>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'これは新しい div 要素です';
const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);
3. メソッド append()
メソッドappend()は、指定された親要素の子要素リストの末尾に1つ以上のノードまたは文字列を追加します。
例:
<html>
<head>
<title>文書</title>
</head>
<body>
<div>これは古い div 要素です</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'これは新しい div 要素です';
const body = document.querySelector('body');
body.append(newDiv);
4. メソッド prepend()
メソッドprepend()は、指定された親要素の子要素リストの最初に1つ以上のノードまたは文字列を追加します。
例:
<html>
<head>
<title>文書</title>
</head>
<body>
<div>これは古い div 要素です</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'これは新しい div 要素です';
const body = document.querySelector('body');
body.prepend(newDiv);
3.3 要素のクローン
メソッドcloneNode()は、要素をクローンすることができます。クローンは深い（すべての子要素をコピーする）か浅い（要素そのもののみ）かのどちらかです。
深いクローンの例:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>文書</title>
</head>
<body>
<div>
これは div 要素です
<ul>
<li>要素 1</li>
<li>要素 2</li>
<li>要素 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);
浅いクローンの例:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>文書</title>
</head>
<body>
<div>
これは div 要素です
<ul>
<li>要素 1</li>
<li>要素 2</li>
<li>要素 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);
document.body.appendChild(clonedDiv);
要素<div>自体はクローンされているが、その子要素（テキストノード「これは div 要素です」と<ul>）はクローンされていないことがわかります。
3.4 要素の削除
1. メソッド removeChild()
メソッドremoveChild()は、親要素から子要素を削除します。
例:
<html>
<head>
<title>文書</title>
</head>
<body>
<div>
これは div 要素です
<p>これは段落です</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
const child = document.querySelector('p');
parent.removeChild(child);
2. メソッド remove()
メソッドremove()は、DOMから要素を直接削除します。
例:
<html>
<head>
<title>文書</title>
</head>
<body>
<div>これは div 要素です</div>
<p>これは段落です</p>
</body>
</html>
const element = document.querySelector('div');
element.remove();
3. 要素の内容をクリア
メソッドinnerHTMLを使用して要素の内容をすべて削除し、それに空の文字列を割り当てることができます。
例:
<html>
<head>
<title>文書</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
これは div 要素です
<p>これは段落です</p>
</div>
</body>
</html>
const element = document.querySelector('div');
element.innerHTML = '';
4. すべての子要素を削除
すべての子要素を削除するには、ループやinnerHTMLメソッドを使用できます。
ループを使った例:
<html>
<head>
<title>文書</title>
</head>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
<body>
<div>
これは div 要素です
<p>これは段落です</p>
<p>これは段落です</p>
<p>これは段落です</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
innerHTMLを使った例:
<html>
<head>
<title>文書</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
これは div 要素です
<p>これは段落です</p>
<p>これは段落です</p>
<p>これは段落です</p>
<ul>
<li>要素 1</li>
<li>要素 2</li>
<li>要素 3</li>
</ul>
</div>
</body>
</html>
const parent = document.querySelector('div');
parent.innerHTML = '';
GO TO FULL VERSION