中編では、要素の内容やスタイルを変更する方法を学びました。後編では、要素を追加・削除する方法と、フォームの入力値を取得する方法を見ていきましょう。

5. 要素を追加・削除する

新しい要素を追加するには、以下の手順を踏みます。

1. document.createElement()で新しい要素を作成する
2. textContentやinnerHTMLで要素の内容を設定する
3. appendChild()やinsertBefore()で、作成した要素をDOMツリーに追加する

要素を削除するには、removeChild()を使います。

要素を追加する

例として、myDivというIDを持つdiv要素の中に、新しいp要素を追加してみましょう。

<div id="myDiv"></div>

// 1. 新しい要素を作成する
const newParagraph = document.createElement("p");

// 2. 要素の内容を設定する
newParagraph.textContent = "新しい段落です。";

// 3. 親要素を取得する
const myDiv = document.getElementById("myDiv");

// 4. 要素を追加する
myDiv.appendChild(newParagraph);

このコードを実行すると、myDiv要素の中にp要素が追加され、以下のようなHTMLになります。

<div id="myDiv">
  <p>新しい段落です。</p>
</div>

appendChild()は、指定した要素の最後の子要素として、新しい要素を追加します。

任意の位置に要素を追加する

insertBefore()を使うと、任意の位置に要素を追加できます。

parentElement.insertBefore(newElement, referenceElement);

• parentElement: 新しい要素を追加する親要素
• newElement: 追加する新しい要素
• referenceElement: この要素の直前に新しい要素が挿入される

例として、myDiv要素の中の、既存のp要素の前に、新しいp要素を追加してみましょう。

<div id="myDiv">
  <p id="existingParagraph">既存の段落です。</p>
</div>

// 1. 新しい要素を作成する
const newParagraph = document.createElement("p");
newParagraph.textContent = "ここに追加されます。";

// 2. 親要素を取得する
const myDiv = document.getElementById("myDiv");

// 3. 挿入位置の直後の要素を取得する
const existingParagraph = document.getElementById("existingParagraph");

// 4. 要素を挿入する
myDiv.insertBefore(newParagraph, existingParagraph);

このコードを実行すると、以下のようなHTMLになります。

<div id="myDiv">
  <p>ここに追加されます。</p>
  <p id="existingParagraph">既存の段落です。</p>
</div>

要素を削除する

要素を削除するには、removeChild()を使います。

parentElement.removeChild(childElement);

• parentElement: 削除する要素の親要素
• childElement: 削除する要素

例として、先ほど追加したp要素を削除してみましょう。

// 1. 親要素を取得する
const myDiv = document.getElementById("myDiv");

// 2. 削除する要素を取得する
const newParagraph = document.querySelector("#myDiv p"); // 一番最初の p 要素

// 3. 要素を削除する
myDiv.removeChild(newParagraph);

このコードを実行すると、p要素が削除され、元のHTMLに戻ります。

6. フォームの入力値を取得する

フォームの入力値を取得するには、valueプロパティを使います。

例として、以下のようなテキストボックスとボタンを持つフォームを考えてみましょう。

<form id="myForm">
  <input type="text" id="myInput" placeholder="ここに文字を入力">
  <button type="button" id="myButton">送信</button>
</form>

ボタンがクリックされたときに、テキストボックスの入力値を取得して、コンソールに表示してみます。

// 1. ボタン要素を取得する
const myButton = document.getElementById("myButton");

// 2. ボタンのクリックイベントを処理する
myButton.addEventListener("click", () => {
  // 3. テキストボックスの要素を取得する
  const myInput = document.getElementById("myInput");

  // 4. 入力値を取得する
  const inputValue = myInput.value;

  // 5. 入力値をコンソールに表示する
  console.log("入力された値:", inputValue);
});

このコードでは、ボタンのクリックイベントを捉えて、その中でテキストボックスのvalueプロパティの値を取得しています。

フォーム送信をキャンセルする

通常、フォームの送信ボタンをクリックすると、フォームがサーバーに送信され、ページが遷移します。しかし、JavaScriptでフォームのデータを処理したい場合は、このデフォルトの動作をキャンセルする必要があります。

それには、イベントオブジェクトのpreventDefault()メソッドを使います。

// 1. フォーム要素を取得する
const myForm = document.getElementById("myForm");

// 2. フォームの送信イベントを処理する
myForm.addEventListener("submit", (event) => {
  // 3. デフォルトの動作をキャンセルする
  event.preventDefault();

  // 4. テキストボックスの要素を取得する
  const myInput = document.getElementById("myInput");

  // 5. 入力値を取得する
  const inputValue = myInput.value;

  // 6. 入力値をコンソールに表示する
  console.log("入力された値:", inputValue);
});

このコードでは、フォームのsubmitイベントを捉えて、event.preventDefault()でデフォルトの送信処理をキャンセルしています。