insertAdjacentHTML をすべての場所に

Paul Kinlan

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 より前のバージョンで動作することを確認したい場合は、このポリフィルを使用できます。