insertAdjacentHTML をすべての場所に

Paul Kinlan

Twitter GitHub Glitch Mastodon ホームページ

HTML ドキュメントにコンテンツを挿入するには、次の 3 つの方法があります。

• createNode や appendChild などの DOM メソッドを使用する
• ドキュメント フラグメントを使用する
• innerHTML の使用

いくつかのユースケースでは、document.write もあると言えるでしょう。

innerHTML は HTML5 で標準化されており、innerHTML として機能する insertAdjacentHTML 兄弟メソッドですが、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 に関する記事を執筆し、次のように結論付けました。

注: ブラウザにこのメソッドを実装することで、信頼できる JavaScript ライブラリの作成に必要なコードの量が大幅に削減されます。このメソッドが（querySelectorAll とともに）さらに広く利用できるようになる日を楽しみにしています。本格的なコードの簡素化を実現できる日を楽しみにしています。

これまで、insertAdjacentHTML の主な問題はブラウザがサポートされていないことでした。バージョン 8 以降の Firefox の insertAdjacentHTML の実装により、モバイル ブラウザを含むすべての主要なブラウザで利用できるようになります。今すぐ使用し、8 より前のバージョンの Firefox で動作することを確認したい場合は、こちらのpolyfillを使用できます。