{開発}{HTML の要素}{Element}{ECMAScript}{Aejs}{要素位置記法}{デライト開発}{道手}{JavaScript言語}{独自ライブラリ}(38)

{JavaScript の beforebegin,afterbegin,beforeend,afterend に代わる要素位置記法 K#F85E/E74C-3DDA}

脱 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) に挿入
読み込み中...
{Aejs}{要素位置記法}{道手}{希哲13年9月5日}{希哲13年9月5日のツイスト}{afterend}{beforeend}{afterbegin}{beforebegin}{ツイスト}(14)
{要素位置記法}{insertAdjacentHTML()}{afterend}{beforeend}{afterbegin}{beforebegin}{希哲13年8月12日のツイスト}{希哲13年8月12日}{JavaScript}{ツイスト}(10)
{beforebegin}

{}