「脱 jQuery」が叫ばれて久しいが,デライト開発でも脱 jQuery を進めるべく Vanilla JS の復習をしていたことがある。その中で,特定要素を基準に別の要素等を挿入する道手群があることを知った。
<!-- (1) beforebegin -->
<div>
<!-- (2) afterbegin -->
各要素位置
<!-- (3) beforeend -->
</div>
<!-- (4) afterend -->
例えば,上記の要素 div
を基準として HTML 文字列 html
を挿入したい時,標準的な JavaScript では以下のように書く。
div.insertAdjacentHTML( 'beforebegin', html ); // (1) に挿入
div.insertAdjacentHTML( 'afterbegin', html ); // (2) に挿入
div.insertAdjacentHTML( 'beforeend', html ); // (3) に挿入
div.insertAdjacentHTML( 'afterend', html ); // (4) に挿入
読み込み中...