JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでHTML DOMに新しい要素を追加する基本手法を解説

HTML DOMに新しい要素を追加するには、まず要素を作成し、その後で既存の要素に追加（アペンド）するという2段階の手順が必要です。

実行手順

1）まずdivセクションを作成し、<p>タグを使ってテキストを配置しておきます。

2）document.createElement("p") を使用して、新しい <p>要素を作成します。

3）document.createTextNode() を使用してテキストノードを作成し、手順2で作成した要素（<p>）の中に挿入できるようにします。

4）appendChild() を使って、作成した要素とテキストをまとめて、既存の divタグへ追加します。

これにより、新しい要素（<p>）が生成され、既存の要素（<div>）に追加されます。

コード例

次の例では、最初は div セクション内にテキストが2つだけ存在しています。しかしスクリプトを実行すると、新しいテキストが1つ作成され、divセクションに追加されます。出力結果でその違いを確認できます。

<html>
<body>
<div id="new">
<p id="p1">Tutorix</p>
<p id="p2">Tutorialspoint</p>
</div>
<script>
   var tag = document.createElement("p");
   var text = document.createTextNode("Tutorix is the best e-learning platform");
   tag.appendChild(text);
   var element = document.getElementById("new");
   element.appendChild(tag);
</script>
</body>
</html>

出力結果

Tutorix

Tutorialspoint

Tutorix is the best e-learning platform

このように、createElement() で要素を生成し、createTextNode() でテキストを作り、appendChild() で親要素に結び付けることで、動的にコンテンツを追加できます。Webページの更新やインタラクティブなUI構築において非常に基本的かつ重要な操作なので、ぜひマスターしておきましょう。

  1. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値