下記コードからフロートチャートを考えているのですが、.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も見ています
-
外出時に「待たせる妻」vs イライラする「待つ夫」は日本だけ?見習いたい海外事情
夫の家事参加に積極的なイメージのある海外でも、同様の事例はあるのか。結婚カウンセラーの佐竹悦子さんに伺ってみた。
-
[初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。
JavaScript
-
ワードプレスインストールできない
オープンソース
-
初心者javascript グーグルクロムのウィンドウを最大化から急に縮小するとテキストがはみ出す。
JavaScript
-
-
4
HTMLのbody内に<style>~</style>定義は作法的にOKでしょうか?
HTML・CSS
-
5
プログラミング言語の制作方法について
C言語・C++・C#
-
6
初心者javascript ウィンドウサイズを変更したら実行するようにしたい
JavaScript
-
7
卒業研究でよく分からないところがあるので教えて欲しいです。 インバータ用組み込みソフトウェア開発シス
C言語・C++・C#
-
8
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
9
無料hp作成ソフトお勧め
オープンソース
-
10
プログラムの素朴な質問です 分岐するコードを書く時に、 /** * 関数 */ sub(){ ...
その他(プログラミング・Web制作)
-
11
ホームページにメールフォーム用のcgiを設置したいのですがうまくいきません
CGI
-
12
変数名をどのようにつけるのが良いかアドバイスお願い致します
JavaScript
-
13
Javaって使いますか、もう古いですか?C++とどっちがいいですか?分析でC++使う授業ありましたけ
C言語・C++・C#
-
14
アマゾンのような評価の星を選択した情報を確認画面でも表示させたいです。
PHP
-
15
フロントエンジニアで一人前といわれるレベルの画面
HTML・CSS
-
16
c#のTLS1.2での通信について
C言語・C++・C#
-
17
Linux Mint でも使えないですよね? お友達から、Windows vista AMD メモリ
UNIX・Linux
-
18
ボタンが押されたらWebページの文字コードを 変える、というプログラミングを書きたいです。 目的は文
HTML・CSS
-
19
コードレビューをお願いします。
JavaScript
-
20
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScript window.openで開く...
-
showModalDialogで開いた画面を...
-
javascriptの基本的なことだと...
-
DOM要素を削除しても、イベント...
-
window.onloadを複数実行したい...
-
Latexに関する質問です。
-
excle VBA とweb上の検索を利用...
-
iframeのソースを取得したい
-
javascriptのdocument.allにつ...
-
ie操作 フレームのURLが...
-
Null またはオブジェクトではあ...
-
google マップ サイズ変更
-
オンマウスについて
-
ドロップダウンメニューを短縮...
-
このjavascriptのif文、条件式...
-
IEのイベントでのウインドウ...
-
Boolean型配列中のTrueの有無を...
-
ActiveXobjectが作成できない
-
C#テキストボックスの文字を配...
-
<a>タグのテキストを取得
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
codejump 模写コーディングgall...
-
このjavascriptのif文、条件式...
-
文字を一文字ずつ表示
-
DOM要素を削除しても、イベント...
-
FireFoxのjavascriptで自動でキ...
-
Javascriptのhtml出力についてa...
-
excle VBA とweb上の検索を利用...
-
Null またはオブジェクトではあ...
-
webページ上のTabキーの動き
-
XMLでのAttributeを持ったNode...
-
JavaScript window.openで開く...
-
ブラウザのウィンドウサイズに...
-
javascriptのdocument.allにつ...
-
javascriptの基本的なことだと...
-
responseTextについて
-
showModalDialogで開いた画面を...
-
iframeのソースを取得したい
-
removeEventListenerの必要性
-
クリッカブルマップのリンク部...
-
ラジオボタンをクリックしたい
おすすめ情報