Javascriptのhtml出力についてappendChildはどのような意味があるのでしょうか？

下記コードからフロートチャートを考えているのですが、.appendChildと.createElementの違いが分からず困っております。
下記コードのHTMLはどのようなコードになるのでしょうか？

confirm_area.textContent = '';
var div;
var child;
child = document.createElement("h2");
child.appendChild(document.createTextNode('確認画面'));
confirm_area.appendChild(child);// confirm_area の末尾に child を追加
div = document.createElement("div");
child.appendChild(document.createTextNode("名前：" + namae_value));
div.appendChild(child);// div の末尾に child を追加
confirm_area.appendChild(div);// confirm_area の末尾に div を追加
div = document.createElement("div");
child.appendChild(document.createTextNode("コメント：" + message_value));
div.appendChild(child);// div の末尾に child を追加
confirm_area.appendChild(div);// confirm_area の末尾に div を追加
div = document.createElement("div");
child = document.createElement("input");

No.1 ベストアンサー 回答者： fujillin 回答日時： 2024/01/29 19:05

こんばんは

ご提示のスクリプトは断片を切り出したものなので、きちん完結したものにはなっていません。
（ですので、正確な結果を記載することはできません。）


＞.appendChildと.createElementの違いが分からず困っております。
　〇〇.appendChild(××)
は「要素〇〇の子要素として××を追加する」というメソッドです。
これに対して、
　document.createElement(◇◇)
は「◇◇の要素を新しく生成する」ものです。
（メソッドの英語表記もそのような感じになっていますよね？）


例えば、
　let div = document.createElement('div');
　div.textContent = 'テスト';
を実行すると、HTMLでいうところの
　<div>テスト</div>
を作成したのと同様のことになります。
ただし、生成しただけなので、これだけでは画面には表示されません。

画面上に表示するには、実在する要素に追加する必要があります。
例えば、上記に続けて
　document.body.appendChild(div);
のような処理を行えば、body要素に「<div>テスト</div>」が追加され、その結果として「テスト」という語句が表示されるようになります。

※ 上記は説明の都合上、HTMLのタグを用いていますけれど、実際の処理は全てDOMに対して行われます。

この回答へのお礼

アドバイスありがとうございます。

お礼日時：2024/02/10 21:35

No.2 回答者： Ogre7077 回答日時： 2024/01/30 10:01

要素を作る操作と、文書構造ツリー内に組み込む操作の違いです。

ウェブ画面は DOM と呼ばれる文書構造ツリーにより管理されるので、
(createした)要素をツリー内に(appendで)組み込まなければいけません。

参考)
https://developer.mozilla.org/ja/docs/Web/API/Do …
https://developer.mozilla.org/ja/docs/Web/API/No …
https://developer.mozilla.org/ja/docs/Web/API/El …

余談ではありますが、

ご提示のコードはとてもバギーなので、動作結果など分かりません。
以下の様に書き直すことをお勧めします。

例)
var E = function(parent, name, text) {
_ var child = document.createElement(name);
_ child.appendChild(document.createTextNode(text));
_ parent.appendChild(child);
_ return child;
}
E(confirm_area, 'h2', '確認画面');
E(confirm_area, 'div', '名前');
...

この回答へのお礼

アドバイスありがとうございます。

お礼日時：2024/02/10 21:35