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

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


$(function () {
  var $targetElement = $('.targetElement');
  $targetElement.append('&lt;p class="insertedElement"&gt;Inserted Element&lt;/p&gt;')
});

1

2

3

4

$(function () {

var $targetElement = $('.targetElement');

$targetElement.append('<p class="insertedElement">Inserted Element</p>')

});

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

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

element.insertAdjacentHTML – Web API | MDN

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


var targetElement = document.querySelector('.targetElement');
targetElement.insertAdjacentHTML('afterbegin', '&lt;p class="insertedElement"&gt;Inserted Element&lt;/p&gt;');

1 2	var targetElement = document.querySelector('.targetElement'); targetElement.insertAdjacentHTML('afterbegin', '<p class="insertedElement">Inserted Element</p>');

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

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


targetElement.insertAdjacentHTML('beforebegin', '&lt;p class="insertedElement"&gt;Inserted Element&lt;/p&gt;');

1	targetElement.insertAdjacentHTML('beforebegin', '<p class="insertedElement">Inserted Element</p>');

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


targetElement.insertAdjacentHTML('afterend', '&lt;p class="insertedElement"&gt;Inserted Element&lt;/p&gt;');

1	targetElement.insertAdjacentHTML('afterend', '<p class="insertedElement">Inserted Element</p>');

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


targetElement.insertAdjacentHTML('afterbegin', '&lt;p class="insertedElement"&gt;Inserted Element&lt;/p&gt;');

1	targetElement.insertAdjacentHTML('afterbegin', '<p class="insertedElement">Inserted Element</p>');

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


targetElement.insertAdjacentHTML('beforeend', '&lt;p class="insertedElement"&gt;Inserted Element&lt;/p&gt;');

1	targetElement.insertAdjacentHTML('beforeend', '<p class="insertedElement">Inserted Element</p>');

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

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

WRITER

ninomiya

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

この著者の記事を見る

PREV各国のECイベントシリーズ</br>「フィリピンのECイベント特集」NEXT【書評】「すぐやる」思考法

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

Related