2020/06/12
もっと早く知っておきたかった…標準のJavaScriptだけでできる文字列のHTML要素をパースして挿入できる.insertAdjacentHTML()
jQueryでは .before()、.after()、.append()、.prepend() を使い、
|
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以上で使えるので、現在は実質使い放題です。
|
1 2 | var targetElement = document.querySelector('.targetElement'); targetElement.insertAdjacentHTML('afterbegin', '<p class="insertedElement">Inserted Element</p>'); |
jQueryとの違いは、メソッドが .before()、.after() のように分かれておらず、引数で挿入位置を指定することです。
要素の前に挿入する場合は、’beforebegin’ を指定します。jQueryでいう .before() にあたります。
|
1 | targetElement.insertAdjacentHTML('beforebegin', '<p class="insertedElement">Inserted Element</p>'); |
要素の後に挿入する場合は、’afterend’ を指定します。jQueryでいう .after() にあたります。
|
1 | targetElement.insertAdjacentHTML('afterend', '<p class="insertedElement">Inserted Element</p>'); |
要素の直下の先頭に挿入する場合は、’afterbegin’ を指定します。jQueryでいう .prepend() にあたります。
|
1 | targetElement.insertAdjacentHTML('afterbegin', '<p class="insertedElement">Inserted Element</p>'); |
要素の直下の最後尾に挿入する場合は、’beforeend’ を指定します。jQueryでいう、.append() にあたります。
|
1 | targetElement.insertAdjacentHTML('beforeend', '<p class="insertedElement">Inserted Element</p>'); |
この機能を知らなかったがゆえにjQueryを使っていた場合も多かったので、
今後はどんどん標準のJavaScriptに切り換えていく自信がつきました。
jQueryを読み込めない場合も多い中国EC案件ではとても重宝しそうです。
Author Profile
SHARE
