innerHTML よりも高速で既存要素を破壊しない。
{HTML の要素}{Aejs}{insertAdjacentHTML()}{希哲13年8月12日の開発}{希哲13年8月12日}{記法}(6)
{要素位置記法 K#F85E/5B28-E380}
宇田川浩行特定 HTML 要素の直前(beforebegin
),要素内の先頭(afterbegin
),要素内の末尾(beforeend
),要素の直後(afterend
),という4つの位置を簡略に表現出来る記法。希哲13年(2019年)8月12日,Aejs のために宇田川浩行が考案。
HTML タグを模しつつ方向を表す記号を兼ねた <
, >
, </
, />
を使う。
<!-- (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 では以下のように記述する。
div.ins( '<', html ); // (1) に挿入
div.ins( '>', html ); // (2) に挿入
div.ins( '</', html ); // (3) に挿入
div.ins( '/>', html ); // (4) に挿入
{
Element
}{@elm.bld..ins()}{insertAdjacentHTML()}(3){Element.insertAdjacentHTML() K#F85E/E74C-A4B8}
宇田川浩行{進捗記録}{進捗}{希哲13年12月25日}{希哲13年12月25日の進捗時限}{希哲13年12月25日の進捗}{デライト最終調整}{@elm.bld..apd_src()}{夜明け前}{事象委譲}{insertAdjacentHTML()}(14)
{希哲13年12月25日29歩 K#F85E/5B28-F48B}
宇田川浩行{進捗記録}{希哲13年9月30日の開発}{希哲13年9月30日の進捗時限}{希哲13年9月30日の進捗}{希哲13年9月30日}{@elm.bld..set_src()}{@elm.bld..apd_src()}{不具合修正}{事象聴取子}{事象委譲}(16)
{希哲13年9月30日4歩 K#F85E/5B28-7F47}
宇田川浩行再描した際,@elm.bld..set_src()(innerHTML)で描出を更新すると IKON 展開などが正常に動作しないという不具合があったが,@elm.bld..apd_src()(insertAdjacentHTML())にすることで解決した。
innerHTML で事象聴取子が破棄されるのは知っていたが,事象委譲を使っていてもこういうことがあるのは意外だった。どこかで取得している要素が同期されていない可能性がある。理解しきれていないが,これに関しては一旦解決。
まだいくつか不具合を残して終了。
{進捗記録}{進捗}{要素位置記法}{insertAdjacentHTML()}{希哲13年8月12日の開発}{@_elm.ptp.apd_HTML()}{希哲13年8月12日の進捗時限}{希哲13年8月12日の進捗}{希哲13年8月12日}{用合い整理}(13)
{希哲13年8月12日11歩 K#F85E/5B28-D67D}
宇田川浩行{要素位置記法}{insertAdjacentHTML()}{afterend}{beforeend}{afterbegin}{beforebegin}{希哲13年8月12日のツイスト}{希哲13年8月12日}{JavaScript}{ツイスト}(10)
{あれ K#F85E/5B28-05D6}
宇田川浩行JavaScript の insertAdjacentHTML() に使う beforebegin, afterbegin, beforeend, afterend をそれぞれ <, >, </, /> と省略表記出来るようにし,これを「要素位置記法」と呼ぶことにした。