insertAdjacentHTML をすべての場所に
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
HTML ドキュメントにコンテンツを挿入するには、次の 3 つの方法があります。
createNode
や appendChild
などの DOM メソッドを使用する
- ドキュメント フラグメントを使用する
innerHTML
の使用
一部のユースケースでは document.write
も使用できます。
innerHTML
は HTML5 で標準化され、兄弟メソッド insertAdjacentHTML も標準化されました。このメソッドは innerHTML
と同様に機能しますが、HTML コンテンツを挿入する場所(beforeBegin、afterBegin、beforeEnd、afterEnd)をより具体的に定義できます。
var ul = document.getElementById("list");
ul.insertAdjacentHTML("beforeEnd", "<li>A new li on the list.</li>");
2008 年に John Resig 氏は insertAdjacentHTML に関する記事を執筆し、次のように結論付けています。
これまで、insertAdjacentHTML の主な問題は、ブラウザでのサポートが不足していることでした。Firefox ではバージョン 8 で insertAdjacentHTML が実装されるため、モバイル ブラウザを含むすべての主要ブラウザで利用できるようになります。すぐに使用して、Firefox 8 より前のバージョンで動作することを確認したい場合は、このポリフィルを使用できます。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2011-08-27 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2011-08-27 UTC。"],[],[]]