下記コードからフロートチャートを考えているのですが、.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も見ています
-
「どうして捨てられないの?」前妻の物を捨てられない男性の心理って?
前妻の物を捨てられない理由に加え、捨てるための手段はあるのかを専門家に聞いてみた!
-
[初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。
JavaScript
-
ワードプレスインストールできない
オープンソース
-
初心者javascript グーグルクロムのウィンドウを最大化から急に縮小するとテキストがはみ出す。
JavaScript
-
-
4
プログラミング言語の制作方法について
C言語・C++・C#
-
5
初心者javascript ウィンドウサイズを変更したら実行するようにしたい
JavaScript
-
6
卒業研究でよく分からないところがあるので教えて欲しいです。 インバータ用組み込みソフトウェア開発シス
C言語・C++・C#
-
7
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
8
無料hp作成ソフトお勧め
オープンソース
-
9
ホームページにメールフォーム用のcgiを設置したいのですがうまくいきません
CGI
-
10
プログラムの素朴な質問です 分岐するコードを書く時に、 /** * 関数 */ sub(){ ...
その他(プログラミング・Web制作)
-
11
変数名をどのようにつけるのが良いかアドバイスお願い致します
JavaScript
-
12
Linux Mint でも使えないですよね? お友達から、Windows vista AMD メモリ
UNIX・Linux
-
13
ボタンが押されたらWebページの文字コードを 変える、というプログラミングを書きたいです。 目的は文
HTML・CSS
-
14
終端記号、非終端記号とは
C言語・C++・C#
-
15
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
16
コードレビューをお願いします。
JavaScript
-
17
HTMLでデスクトップの画像がでない
HTML・CSS
-
18
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
19
これの対応OSを教えて下さい。php-8.3.0-src.zip
PHP
-
20
ウェブ、孤立画像を検出する方法
その他(プログラミング・Web制作)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字を一文字ずつ表示
-
javascriptの基本的なことだと...
-
JavaScript window.openで開く...
-
ラジオボタンでreadonlyの切替え
-
DOM要素を削除しても、イベント...
-
ラジオボタンをクリックしたい
-
removeEventListenerの必要性
-
クリッカブルマップのリンク部...
-
window.openでタイトル名の指定
-
Excel VBA の ChangeFileAccess
-
クリックすると上に開くアコー...
-
JavaScriptで、現在日時から100...
-
ジェネレーターの作り方
-
javascript 特定のタグのidの存...
-
google apps scriptの終了のさせ方
-
XMLHttpRequestでキャッシュを...
-
functionから別のfunctionを実...
-
VSCODE[Python]の設定について
-
JSONデータを50音順でソートしたい
-
javascript 変数名の連結をしたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
FireFoxのjavascriptで自動でキ...
-
Latexに関する質問です。
-
DOM要素を削除しても、イベント...
-
XMLでのAttributeを持ったNode...
-
TexでΣの添え字の位置直し
-
JavaScript window.openで開く...
-
javascriptの基本的なことだと...
-
Null またはオブジェクトではあ...
-
iframeのソースを取得したい
-
選択肢によってラジオボタンを...
-
excle VBA とweb上の検索を利用...
-
文字を一文字ずつ表示
-
ラジオボタンでreadonlyの切替え
-
responseTextについて
-
VBAのIE操作でframe構造のサイ...
-
オンマウスについて
-
要素のリサイズをひろい、他の...
-
サブウィンドウからのスタイル...
-
JavaScriptのdocument.all("変...
-
クリッカブルマップのリンク部...
おすすめ情報