[解決済み] JavaScriptでHTML要素を挿入する
2022-11-12 06:25:21
質問
以下の構文を使用する場合、属性やイベントの種類ごとに回避策を探すのは面倒です。
elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);
HTML要素全体を文字列として宣言するような方法はないでしょうか? のように。
elem = document.createElement("<div id='myID'> my Text </div>");
document.body.insertBefore(elem,document.body.childNodes[0]);
どのように解決するのですか?
を直接いじるのではなく
innerHTML
を直接いじるよりも、フラグメントを作ってそれを挿入したほうがいいかもしれません。
function create(htmlStr) {
var frag = document.createDocumentFragment(),
temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
}
var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);
メリット
- insertBefore、appendChild などの挿入用のネイティブ DOM メソッドを使用できる。
- 挿入される前の実際の DOM ノードにアクセスすることができます。フラグメントの childNodes オブジェクトにアクセスすることができます。
- ドキュメントフラグメントの使用は非常に速く、DOM の外側に要素を作成するよりも速く、特定の状況下では innerHTML よりも速いです。
とはいえ
innerHTML
が関数内で使われていますが、これはすべて DOM の外側で起こっているので、思ったよりもずっと速いのです。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] 各オブジェクトに?重複
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?