▶▶▶ 【最大補助3/4】
IT導入補助金特別枠(C類型)を使って越境ECサイトを構築しませんか?

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

もっと早く知っておきたかった…標準のJavaScriptだけでできる文字列のHTML要素をパースして挿入できる.insertAdjacentHTML()

テクニック

もっと早く知っておきたかった…標準のJavaScriptだけでできる文字列のHTML要素をパースして挿入できる.insertAdjacentHTML()

jQueryでは .before()、.after()、.append()、.prepend() を使い、

のようにして文字列のHTMLをパースして特定の要素の中や前後に挿入することができます。

標準のJavaScriptでは、そのような便利なものはないと思っていたのですが、ありました。

element.insertAdjacentHTML – Web API | MDN

.insertAdjacentHTML() を使うと、標準のJavaScriptだけで、文字列のHTMLをパースして特定の要素の中や前後に挿入することができます。しかもIE10以上で使えるので、現在は実質使い放題です。

jQueryとの違いは、メソッドが .before()、.after() のように分かれておらず、引数で挿入位置を指定することです。

要素の前に挿入する場合は、’beforebegin’ を指定します。jQueryでいう .before() にあたります。

要素の後に挿入する場合は、’afterend’ を指定します。jQueryでいう .after() にあたります。

要素の直下の先頭に挿入する場合は、’afterbegin’ を指定します。jQueryでいう .prepend() にあたります。

要素の直下の最後尾に挿入する場合は、’beforeend’ を指定します。jQueryでいう、.append() にあたります。

この機能を知らなかったがゆえにjQueryを使っていた場合も多かったので、
今後はどんどん標準のJavaScriptに切り換えていく自信がつきました。

jQueryを読み込めない場合も多い中国EC案件ではとても重宝しそうです。

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。

資料ダウンロード

送信いただいたメールアドレス宛に、資料のダウンロードURLを送付いたします。