【JavaScript入門】DOM操作でHTML要素を作成して追加する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptのDOM操作でHTML要素を作成して追加する方法を解説していきます。

1 要素の作成と追加
2 Sample-Code-全文
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 Twitterやってます！Follow Me！
6 参考・引用
7 【おすすめ関連記事】
8 最近の投稿

要素の作成と追加

DOM操作でHTML要素を作成することと、追加することは別々の処理です。

例外として、要素の作成と追加を同時にしてくれる「 innerHTML 」というプロパティもありますが、基本的に要素の作成と追加は別のものとして理解しておきましょう。

要素の生成 Ver. createElement()

DOM操作でHTML要素を生成する場合は、createElement() を使います。

構文: let element = document.createElement(生成するHTMLタグ名);

戻り値は生成されたHTML要素のオブジェクト（HTMLElement）になります。

// 1. h2を作成
const h2 = document.createElement('h2');
// 構文: let element = document.createElement(生成するHTMLタグ名);

親要素の最後の子要素として追加する「 appendChild() 」

指定した親要素の最後の子要素として追加するのに使用するのが、appendChild() です。

構文:親要素.appendChild(追加する要素);

// 1. h2を作成
const h2 = document.createElement('h2');

// 2. Textを追加
h2.textContent = 'DOM-操作で作成された H2-タグ🔥';

// 3. 追加するために親要素を取得する
const mainContents = document.querySelector('.main-contents');

// 4. 親要素の最後の子要素として追加する
mainContents.appendChild(h2);
// 構文:親要素.appendChild(追加する要素);

指定した要素の直前に追加する「 insertBefore 」

親要素と子要素を指定して、指定した子要素の直前に追加するのに使用するのが、insertBefore() です。

insertBefore() は少しだけ使用するのがややこしいので注意です。

構文: 親要素.insertBefore(直前に追加したい要素, 直後に配置される要素);

// 1. 新しく要素を生成する
const robotama2 = document.createElement('li');

robotama2.textContent = 'ロボ玉試作2号機🔥';

// 2. 親要素を取得する
const robotamaProject = document.querySelector('.robotama-project');
console.log({robotamaProject});

// 3. 隣接する子要素を取得する(直後に配置される子要素)
const robotama3 = robotamaProject.children[1];

// 4. insertBefore() で 指定要素の直前に追加する！
robotamaProject.insertBefore(robotama2, robotama3);
// 構文: 親要素.insertBefore(直前に追加したい要素, 直後に配置される要素);

要素の生成と追加を同時にできる「 innerHTML 」

DOM要素を作るにはcreateElement以外にも方法があります。

innerHTMLというプロパティを使うと要素の生成とDOMへの追加が一度にできます。

構文: element.innerHTML = html_string;

html_stringはHTMLのタグ記法の文字列が使えます。

innerHTMLに値を文字列を代入すると既存のDOM要素はすべて消えることに注意しましょう。

既に他の要素が存在する状態で末尾に追加したい場合は、innerHTMLに再代入するのではなく追記するようにします。

// 1. 追加したい親要素を取得する
const petList = document.getElementById('pet-list');


// 2. innerHTMLで要素の生成と追加を同時にする！
petList.innerHTML = `
    <h3>きゃわたん List</h3>
    <ol>
        <li>ロボ玉🔥</li>
        <li>白桃</li>
        <li>ももちゃん</li>
    </ol>
`;

// 3. 追記は「 += 」
petList.innerHTML += `<p>ペットのListです</p>`;

Sample-Code-全文

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM-Element-Create🔥</title>
</head>
<body>

    <div class="main-contents" >
        <h1>DOM-Element-Create-Testをするロボ玉🔥</h1>


        <h2>1. 要素の生成 Ver. createElement()</h2>
        <p></p>
        <p>構文: let element = document.createElement(tag_name);</p>
        <p>引数tag_nameには生成したい要素名（タグ名）を指定します。</p>
        <p>戻り値は生成された要素オブジェクト（HTMLElement）になります。</p>

        <br>

        <h2>2. 要素の追加</h2>
        <p>要素を生成しただけでは、画面上には表示されません🔥</p>
        <p>DOM構造に追加していないからです。要素はDOM構造に加えて初めて描画されます。</p>
        <p>要素をDOM構造に加えるためには、要素を「どこに追加するのか」という情報が必要です。</p>

        <h3>2-1. 最後の子要素として追加</h3>
        <p>指定要素の最後の子要素として追加する🔥</p>
        <p>構文: element.appendChild(target);</p>
        <p>引数targetには追加する要素を指定します。targetはelementの最後の子要素として追加されます。</p>

        <h3>2-2. 要素の直前に追加</h3>
        <p>指定した要素の直前に要素を追加する</p>
        <p>構文: 親要素.insertBefore(直前に追加したい要素, 直後に配置される要素);</p>
        <p>注意点としてinsertBeforeはappendChildと同様に親のオブジェクトから呼び出すということです。</p>
        <p>親のメソッドから呼び出さないといけない🔥</p>

        <br>

        <h2>3. 要素の生成と追加を同時にできる「 innerHTML 」</h2>
        <p>DOM要素を作るにはcreateElement以外にも方法があります。</p>
        <p>innerHTMLというプロパティを使うと要素の生成とDOMへの追加が一度にできます。</p>
        <p>構文: element.innerHTML = html_string;</p>
        <p>html_stringはHTMLのタグ記法の文字列が使えます。</p>
        <p>つまりHTMLを書く感覚で使えるのです。当然、属性もHTMLの感覚で書けます。</p>
        <p>innerHTMLに値を文字列を代入すると既存のDOM要素はすべて消えることに注意しましょう。</p>
        <p>既に他の要素が存在する状態で末尾に追加したい場合は、innerHTMLに再代入するのではなく追記するようにします。</p>

        <br>

        <h2>DOM-Element-Create-操作訓練🔥</h2>

    
        <h3>ロボ玉開発計画🔥</h3>

        <ol class="robotama-project">
            <li>ロボ玉試作1号機🔥</li>
            <li>ロボ玉試作3号機🔥</li>
            <li>ロボ玉試作4号機🔥</li>
        </ol>
        
        <div id="pet-list"></div>
        
    </div>
    
    <script>

        // h2を作成
        const h2 = document.createElement('h2');
        // 構文: let element = document.createElement(生成するHTMLタグ名);

        // Textを追加
        h2.textContent = 'DOM-操作で作成された H2-タグ🔥';

        // 追加するために親要素を取得する
        const mainContents = document.querySelector('.main-contents');

        // 親要素の最後の子要素として追加する
        mainContents.appendChild(h2);
        // 構文:親要素.appendChild(追加する要素);

        // 新しく要素を生成する
        const robotama2 = document.createElement('li');

        robotama2.textContent = 'ロボ玉試作2号機🔥';

        // 親要素を取得する
        const robotamaProject = document.querySelector('.robotama-project');
        console.log({robotamaProject});

        // 隣接する子要素を取得する(直後に配置される子要素)
        const robotama3 = robotamaProject.children[1];

        // insertBefore() で 指定要素の直前に追加する！
        robotamaProject.insertBefore(robotama2, robotama3);
        // 構文: 親要素.insertBefore(直前に追加したい要素, 直後に配置される要素);
        // 追加したい親要素を取得する

        
        const petList = document.getElementById('pet-list');

        // innerHTMLで要素の生成と追加を同時にする！
        petList.innerHTML = `
            <h3>きゃわたん List</h3>
            <ol>
                <li>ロボ玉🔥</li>
                <li>白桃</li>
                <li>ももちゃん</li>
            </ol>
        `;

        // 追記は「 += 」
        petList.innerHTML += `<p>ペットのListです</p>`;

    </script>

</body>
</html>