下記コードからフロートチャートを考えているのですが、.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ベストアンサー
- 回答日時:
こんばんは
ご提示のスクリプトは断片を切り出したものなので、きちん完結したものにはなっていません。
(ですので、正確な結果を記載することはできません。)
>.appendChildと.createElementの違いが分からず困っております。
〇〇.appendChild(××)
は「要素〇〇の子要素として××を追加する」というメソッドです。
これに対して、
document.createElement(◇◇)
は「◇◇の要素を新しく生成する」ものです。
(メソッドの英語表記もそのような感じになっていますよね?)
例えば、
let div = document.createElement('div');
div.textContent = 'テスト';
を実行すると、HTMLでいうところの
<div>テスト</div>
を作成したのと同様のことになります。
ただし、生成しただけなので、これだけでは画面には表示されません。
画面上に表示するには、実在する要素に追加する必要があります。
例えば、上記に続けて
document.body.appendChild(div);
のような処理を行えば、body要素に「<div>テスト</div>」が追加され、その結果として「テスト」という語句が表示されるようになります。
※ 上記は説明の都合上、HTMLのタグを用いていますけれど、実際の処理は全てDOMに対して行われます。
No.2
- 回答日時:
要素を作る操作と、文書構造ツリー内に組み込む操作の違いです。
ウェブ画面は 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', '名前');
...
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- その他(プログラミング・Web制作) seleniumbasic chrome操作について 1 2023/03/29 15:40
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript 【JavaScript】検索がヒットした場合、プルダウンをオープンで表示させる方法 2 2023/09/06 14:02
- HTML・CSS pythonのコードについてご教示ください 1 2024/01/14 05:39
- JavaScript 出発駅A、到着駅Bを選択すると、2.3㎞と170円と返るようにしたいです。 1 2024/01/26 08:33
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- その他(プログラミング・Web制作) pythonでのカーソル移動がずれる 2 2023/07/30 08:51
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教えるわが家の防犯対策術!
ホームセキュリティのプロが、家庭の防犯対策を真剣に考える 2組のご夫婦へ実際の防犯対策術をご紹介!どうすれば家と家族を守れるのかを教えます!
-
[初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。
JavaScript
-
初心者javascript グーグルクロムのウィンドウを最大化から急に縮小するとテキストがはみ出す。
JavaScript
-
ワードプレスインストールできない
オープンソース
-
-
4
プログラミング言語の制作方法について
C言語・C++・C#
-
5
初心者javascript ウィンドウサイズを変更したら実行するようにしたい
JavaScript
-
6
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
7
卒業研究でよく分からないところがあるので教えて欲しいです。 インバータ用組み込みソフトウェア開発シス
C言語・C++・C#
-
8
無料hp作成ソフトお勧め
オープンソース
-
9
プログラムの素朴な質問です 分岐するコードを書く時に、 /** * 関数 */ sub(){ ...
その他(プログラミング・Web制作)
-
10
ホームページにメールフォーム用のcgiを設置したいのですがうまくいきません
CGI
-
11
変数名をどのようにつけるのが良いかアドバイスお願い致します
JavaScript
-
12
フロントエンジニアで一人前といわれるレベルの画面
HTML・CSS
-
13
c#のTLS1.2での通信について
C言語・C++・C#
-
14
ボタンが押されたらWebページの文字コードを 変える、というプログラミングを書きたいです。 目的は文
HTML・CSS
-
15
Linux Mint でも使えないですよね? お友達から、Windows vista AMD メモリ
UNIX・Linux
-
16
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
17
終端記号、非終端記号とは
C言語・C++・C#
-
18
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
19
HTMLでデスクトップの画像がでない
HTML・CSS
-
20
ウェブ、孤立画像を検出する方法
その他(プログラミング・Web制作)
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
教えてください><
-
Latexに関する質問です。
-
VBAでIEのボタンを押してメッセ...
-
2つのプルダウンの連動に関して
-
removeEventListenerの必要性
-
TexでΣの添え字の位置直し
-
オンマウスについて
-
重い処理とはどのようなものが...
-
回答するたびに回答の種類、ど...
-
TEXTAREA内の改行位置をinnerHT...
-
ラジオボタンでreadonlyの切替え
-
ポップアップウインド
-
javascriptの基本的なことだと...
-
excle VBA とweb上の検索を利用...
-
このjavascriptのif文、条件式...
-
セレクトメニューセレクトメニ...
-
javascript で li タグにある値...
-
関数でy=g(x)のgとは何の略です...
-
<a>タグのテキストを取得
-
HTML:Tableタグに対し、JavaScr...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScript window.openで開く...
-
文字を一文字ずつ表示
-
DOM要素を削除しても、イベント...
-
FireFoxのjavascriptで自動でキ...
-
javascriptの基本的なことだと...
-
このjavascriptのif文、条件式...
-
XMLでのAttributeを持ったNode...
-
Latexに関する質問です。
-
Null またはオブジェクトではあ...
-
VBAでIEのボタンを押してメッセ...
-
乗換案内 VBAで操作したい
-
javascriptのdocument.allにつ...
-
TexでΣの添え字の位置直し
-
showModalDialogで開いた画面を...
-
ラジオボタンでreadonlyの切替え
-
excle VBA とweb上の検索を利用...
-
LaTeX:数式を等号揃えにする方法
-
TEXTAREA内の改行位置をinnerHT...
-
iframe内のページ(複数)を変更
-
ブラウザのウィンドウサイズに...
おすすめ情報