JavaScriptで新しい要素を作成する方法（createElement, appendChildなど）

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptでウェブページに新しい要素を追加することってできますか？例えば、ボタンをクリックしたら新しい段落を表示させるとか...」

先生

「もちろんできます！JavaScriptには、createElementやappendChildといった、新しい要素を作成してページに追加するためのメソッドが用意されていますよ。」

生徒

「それって難しいんですか？」

先生

「いいえ、基本的な流れを覚えてしまえば簡単です。それでは、要素の作成から追加までの手順を一緒に学んでいきましょう！」

新しい要素を作成するとは？

新しい要素を作成するとは？" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

新しい要素を作成するとは？

JavaScriptで新しい要素を作成するとは、プログラムの実行中に、HTMLの要素（タグ）を動的に生成して、ウェブページに追加することです。

HTMLファイルに最初から書かれている要素だけでなく、ユーザーの操作に応じて、その場で新しい要素を作り出して表示させることができます。これにより、インタラクティブで動的なウェブページを作ることができます。

身近な例えで理解しよう

要素の作成と追加は、「レゴブロックで家を組み立てる」作業に似ています。

新しいブロック（パーツ）を取り出す＝createElementで要素を作成
ブロックに色や形を設定する＝要素にテキストやスタイルを設定
ブロックを家に取り付ける＝appendChildでページに追加

このように、部品を用意して、設定を行い、最後に組み込むという流れです。

要素作成の基本的な流れ

要素作成の基本的な流れ" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

要素作成の基本的な流れ

JavaScriptで新しい要素を作成してページに追加するには、次の手順を踏みます。

要素を作成する（createElement）
要素の内容やスタイルを設定する（textContentなど）
要素をページに追加する（appendChild）

この3つのステップを順番に実行することで、新しい要素をウェブページに表示させることができます。

createElement() - 要素を作成する

createElement() - 要素を作成する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

createElement() - 要素を作成する

createElement()は、新しいHTML要素を作成するメソッドです。このメソッドを使って、段落、見出し、ボタンなど、あらゆるHTML要素を作ることができます。

基本的な使い方


// 新しいp要素（段落）を作成
const newParagraph = document.createElement('p');

// 新しいdiv要素を作成
const newDiv = document.createElement('div');

// 新しいbutton要素を作成
const newButton = document.createElement('button');

createElement()の引数には、作成したいタグ名を文字列で指定します。この時点では、要素が作成されただけで、まだページには表示されていません。

ポイント：作成した要素は変数に保存しておきます。後でこの変数を使って、要素に内容を設定したり、ページに追加したりします。

要素に内容を設定する

要素に内容を設定する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

要素に内容を設定する

作成した要素には、テキストや属性、スタイルなどを設定できます。

テキストを設定する


// 新しいp要素を作成
const paragraph = document.createElement('p');

// テキストを設定
paragraph.textContent = 'これは新しく追加された段落です。';

属性を設定する


// 新しいbutton要素を作成
const button = document.createElement('button');

// id属性を設定
button.id = 'myButton';

// class属性を設定
button.className = 'btn btn-primary';

// テキストを設定
button.textContent = 'クリック';

スタイルを設定する


// 新しいdiv要素を作成
const box = document.createElement('div');

// スタイルを設定
box.style.width = '200px';
box.style.height = '100px';
box.style.backgroundColor = 'lightblue';
box.textContent = 'ボックス';

このように、要素を作成した後は、通常のDOM要素と同じように、様々なプロパティを設定できます。

appendChild() - 要素をページに追加する

appendChild() - 要素をページに追加する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

appendChild() - 要素をページに追加する

appendChild()は、作成した要素を親要素の子要素として追加するメソッドです。このメソッドを使うことで、初めて作成した要素がウェブページに表示されます。

基本的な使い方


<!DOCTYPE html>
<html>
<head>
    <title>appendChild の例</title>
</head>
<body>
    <div id="container">
        <p>既存の段落</p>
    </div>
    
    <script>
        // 新しいp要素を作成
        const newParagraph = document.createElement('p');
        newParagraph.textContent = '新しく追加された段落';
        
        // container要素を取得
        const container = document.getElementById('container');
        
        // container要素の中に新しい段落を追加
        container.appendChild(newParagraph);
    </script>
</body>
</html>

実行結果


ページには次のように表示されます：

既存の段落
新しく追加された段落

appendChild()は、親要素に対して呼び出し、引数には追加したい子要素を指定します。追加された要素は、親要素の最後の子要素として配置されます。

完全な例：ボタンクリックで要素を追加

完全な例：ボタンクリックで要素を追加" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

完全な例：ボタンクリックで要素を追加

それでは、実際にボタンをクリックしたときに新しい要素を追加する、実用的な例を見てみましょう。


<!DOCTYPE html>
<html>
<head>
    <title>要素の動的追加</title>
</head>
<body>
    <h2>ToDo リスト</h2>
    <button id="addButton">項目を追加</button>
    <ul id="todoList"></ul>
    
    <script>
        // ボタン要素を取得
        const addButton = document.getElementById('addButton');
        const todoList = document.getElementById('todoList');
        
        // カウンター変数
        let count = 1;
        
        // ボタンがクリックされたときの処理
        addButton.addEventListener('click', function() {
            // 新しいli要素を作成
            const newItem = document.createElement('li');
            
            // テキストを設定
            newItem.textContent = 'タスク ' + count;
            
            // リストに追加
            todoList.appendChild(newItem);
            
            // カウンターを増やす
            count++;
        });
    </script>
</body>
</html>

このコードでは、ボタンをクリックするたびに、新しいリスト項目が追加されていきます。何度でもクリックできるため、動的にリストを増やすことができます。

insertBefore() - 特定の位置に要素を挿入する

insertBefore() - 特定の位置に要素を挿入する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

insertBefore() - 特定の位置に要素を挿入する

appendChild()は常に最後に追加しますが、insertBefore()を使えば、特定の要素の前に挿入することができます。


<!DOCTYPE html>
<html>
<head>
    <title>insertBefore の例</title>
</head>
<body>
    <ul id="list">
        <li id="first">項目1</li>
        <li id="second">項目2</li>
        <li id="third">項目3</li>
    </ul>
    
    <script>
        // 新しいli要素を作成
        const newItem = document.createElement('li');
        newItem.textContent = '新しい項目';
        
        // リストと基準となる要素を取得
        const list = document.getElementById('list');
        const secondItem = document.getElementById('second');
        
        // secondItemの前に新しい項目を挿入
        list.insertBefore(newItem, secondItem);
    </script>
</body>
</html>

実行結果


・項目1
・新しい項目
・項目2
・項目3

insertBefore()の第一引数には挿入したい要素、第二引数には基準となる要素を指定します。新しい要素は、基準要素の直前に挿入されます。

複雑な要素を作成する

複雑な要素を作成する" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

複雑な要素を作成する

実際の開発では、複数の要素を組み合わせた構造を作成することもあります。


// カード要素を作成する関数
function createCard(title, content) {
    // カード全体のdivを作成
    const card = document.createElement('div');
    card.className = 'card';
    
    // タイトルのh3を作成
    const cardTitle = document.createElement('h3');
    cardTitle.textContent = title;
    
    // 本文のpを作成
    const cardContent = document.createElement('p');
    cardContent.textContent = content;
    
    // カードにタイトルと本文を追加
    card.appendChild(cardTitle);
    card.appendChild(cardContent);
    
    return card;
}

// カードを作成してbodyに追加
const myCard = createCard('カードのタイトル', 'これはカードの内容です。');
document.body.appendChild(myCard);

このように、複数の要素を組み合わせて、階層構造を持った要素を作成することもできます。

要素を削除する方法

要素を削除する方法" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

要素を削除する方法

追加するだけでなく、要素を削除することもできます。removeChild()やremove()メソッドを使います。

removeChild() を使う方法


// 親要素を取得
const parent = document.getElementById('container');

// 削除したい子要素を取得
const child = document.getElementById('removeMe');

// 親要素から子要素を削除
parent.removeChild(child);

remove() を使う方法（より簡単）


// 削除したい要素を取得
const element = document.getElementById('removeMe');

// 要素を削除
element.remove();

remove()メソッドの方がシンプルで使いやすいですが、古いブラウザでは動作しない場合があるため、注意が必要です。

実践例：入力内容をリストに追加

実践例：入力内容をリストに追加" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

実践例：入力内容をリストに追加

最後に、ユーザーが入力した内容をリストに追加する、実用的な例を紹介します。


<!DOCTYPE html>
<html>
<head>
    <title>入力内容の追加</title>
</head>
<body>
    <h2>買い物リスト</h2>
    <input type="text" id="itemInput" placeholder="商品名を入力">
    <button id="addBtn">追加</button>
    <ul id="shoppingList"></ul>
    
    <script>
        const addBtn = document.getElementById('addBtn');
        const itemInput = document.getElementById('itemInput');
        const shoppingList = document.getElementById('shoppingList');
        
        addBtn.addEventListener('click', function() {
            // 入力値を取得
            const inputValue = itemInput.value;
            
            // 入力が空でないか確認
            if (inputValue !== '') {
                // 新しいli要素を作成
                const newItem = document.createElement('li');
                newItem.textContent = inputValue;
                
                // リストに追加
                shoppingList.appendChild(newItem);
                
                // 入力欄をクリア
                itemInput.value = '';
            }
        });
    </script>
</body>
</html>

このコードでは、入力欄に商品名を入力して「追加」ボタンをクリックすると、その内容がリストに追加されます。また、入力が空の場合は何も追加されないようにチェックしています。

活用例：このような仕組みを使えば、ToDoリスト、メモ帳、チャットアプリなど、様々なインタラクティブなウェブアプリケーションを作ることができます。

よく使うメソッドのまとめ

よく使うメソッドのまとめ" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

よく使うメソッドのまとめ

要素の作成と操作に関する主要なメソッドを整理しておきましょう。

メソッド	説明	使用例
`createElement()`	新しい要素を作成	要素の生成
`appendChild()`	要素を最後に追加	子要素の追加
`insertBefore()`	特定の位置に挿入	順序指定の追加
`removeChild()`	子要素を削除	要素の削除
`remove()`	要素自身を削除	簡単な削除

注意点とベストプラクティス

注意点とベストプラクティス" onerror="this.onerror=null; this.src='/img/view/java-exception-introduce.jpg';">

注意点とベストプラクティス

要素は作成後に追加する

createElement()で作成しただけでは、要素はページに表示されません。必ずappendChild()などで追加する必要があります。

変数に保存してから操作する

作成した要素は変数に保存し、その変数を通じて操作や追加を行います。これにより、コードが読みやすく、管理しやすくなります。

大量の要素を追加する場合

多数の要素を追加する場合は、一つずつ追加するのではなく、一時的な要素にまとめてから一度に追加する方が効率的です。

パフォーマンスの注意：DOMの操作は比較的重い処理なので、ループ内で何度もappendChild()を呼び出すと、ページの動作が遅くなることがあります。

現役テックリードが直接指導【JavaScript実践実践セミナー】

Vanilla JSから始めるモダンJavaScript実践講座｜ES6+とDOM操作の完全理解

累計120万PV超の専門メディアが監修。商用フロントエンド開発の「設計の型」を最短習得。

ブラウザを操る。モダンJavaScript（ES6+）の基礎とDOM操作の真髄。

本講座では、ReactやVue.jsといったフレームワークの土台となるJavaScriptの本質を学びます。ライブラリに頼らず、ブラウザ上で何が起きているのかを理解することで、デバッグ能力と実装スピードを劇的に向上させます。最新のES6以降のモダン記法や、実務で必須となるイベント駆動設計を60分で濃縮体験します。