JavaScript: innerHTML と appendChild()の違いについて。

Question

初めまして、プログラミング初心者です。
質問内容はタイトルの通りなのですが、JavaScriptでDOMを操作するときにinnerHTMLとappendChild、どちらを使っていいか分からないときがあります。

例えば、下記の場合にどうしてinnerHTMLが使えないのか分かりません。

const postsContainer = document.getElementById('posts-container');

const postEl = document.createElement('div');
    postEl.innerHTML = `
        <div class="number">${post.id}</div>
        <div class="post-info">
            <h2 class="post-title">${post.title}</h2>
            <p class="post-body">${post.body}</p>
        </div>
        `;

    //innerHTMLを使うとHTMLには [object HTMLDivElement] とのみ出力される
    postsContainer.innerHTML = postEl;

    //appendChildを使うとHTMLに正常に出力される
    postsContainer.appendChild(postEl);

自分でも色々検索してみたのですが、なかなか違いがしっくり来ないので、ぜひご回答いただければ幸いです。よろしくお願いしますm(_ _)m

Answer 1

DOMのプロパティである innerHTML や outerHTML は、マークアップ文書をそのまま扱うことのできる特徴があります。

乱暴に言うと、DOM（オブジェクト）とマークアップ言語（文字列）との相互変換器（コンバータ）ですね。

[object HTMLDivElement] とのみ出力される

とコメントされている行は以下のように、文字列処理として書く必要があります。

 postsContainer.innerHTML += postEl.outerHTML;

尚、appendChild() が意図された結果と示されていましたので、演算子を += で表記しています。

Comments

[atokbo]

ご回答いただきありがとうございます！

すみません、なんとなくしか理解できていないのですがelement.outerHTMLとすると文字列と認識されるということでしょうか...？

[AkitoshiManabe]

console.log( typeof element.outerHTML ) を試すといいですよ。
element をマークアップ（文字列化）したり、マークアップ言語をelement(オブジェクト)の構造にしたり。プログラミングにおいて、データの型が変わります。

[atokbo]

なるほど。データの型についてもっと勉強したいと思います！

ありがとうございました^^

Answer 2

innerHTMLには文字列しか入りません。createElementで作成しているのはElementオブジェクトです。

【element.innerHTML - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML

【Document.createElement - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/createElement

Comments

[atokbo]

なるほど！参考URLまで添付していただき、ありがとうございました。