下記コードからフロートチャートを考えているのですが、.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
HTMLのbody内に<style>~</style>定義は作法的にOKでしょうか?
HTML・CSS
-
5
プログラミング言語の制作方法について
C言語・C++・C#
-
6
卒業研究でよく分からないところがあるので教えて欲しいです。 インバータ用組み込みソフトウェア開発シス
C言語・C++・C#
-
7
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
8
初心者javascript ウィンドウサイズを変更したら実行するようにしたい
JavaScript
-
9
プログラムの素朴な質問です 分岐するコードを書く時に、 /** * 関数 */ sub(){ ...
その他(プログラミング・Web制作)
-
10
無料hp作成ソフトお勧め
オープンソース
-
11
ホームページにメールフォーム用のcgiを設置したいのですがうまくいきません
CGI
-
12
変数名をどのようにつけるのが良いかアドバイスお願い致します
JavaScript
-
13
アマゾンのような評価の星を選択した情報を確認画面でも表示させたいです。
PHP
-
14
フロントエンジニアで一人前といわれるレベルの画面
HTML・CSS
-
15
c#のTLS1.2での通信について
C言語・C++・C#
-
16
ボタンが押されたらWebページの文字コードを 変える、というプログラミングを書きたいです。 目的は文
HTML・CSS
-
17
Linux Mint でも使えないですよね? お友達から、Windows vista AMD メモリ
UNIX・Linux
-
18
これの対応OSを教えて下さい。php-8.3.0-src.zip
PHP
-
19
コードレビューをお願いします。
JavaScript
-
20
終端記号、非終端記号とは
C言語・C++・C#
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
背景ランダム
-
SafariのIframeで高さが取得で...
-
ラジオボタンでreadonlyの切替え
-
クリッカブルマップのリンク部...
-
選択によってsubmitボタンの色...
-
showModalDialogで開いた画面を...
-
javascriptの基本的なことだと...
-
Javascriptで定期的にF5を押す...
-
チャットフォームで文字色をラ...
-
同じIDで定義した要素の配列を...
-
functionから別のfunctionを実...
-
<a>タグのテキストを取得
-
javascriptとphpの連携で疑問
-
Javascriptグローバル変数の値...
-
関数でy=g(x)のgとは何の略です...
-
ActiveXobjectが作成できない
-
JavaScriptでの動的な多次元配...
-
C#テキストボックスの文字を配...
-
javascriptで自動計算フォーム...
-
javascriptで文字挿入でtoggle...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScript window.openで開く...
-
このjavascriptのif文、条件式...
-
FireFoxのjavascriptで自動でキ...
-
DOM要素を削除しても、イベント...
-
javascriptの基本的なことだと...
-
文字を一文字ずつ表示
-
showModalDialogで開いた画面を...
-
Null またはオブジェクトではあ...
-
Javascriptのhtml出力についてa...
-
codejump 模写コーディングgall...
-
LaTeX:数式を等号揃えにする方法
-
javascriptのdocument.allにつ...
-
excle VBA とweb上の検索を利用...
-
Latexに関する質問です。
-
乗換案内 VBAで操作したい
-
JavaScriptのdocument.all("変...
-
Javascriptで定期的にF5を押す...
-
選択によってsubmitボタンの色...
-
スマホでフォームにフォーカス...
-
compatModeとは?
おすすめ情報