Posted at

HTMLの親子構造を無視したHTMLをinnerHTMLに入れたときの挙動

More than 3 years have passed since last update.

とあるHTMLテンプレートエンジンを使っているときに遭遇して2週間苦しんだので書く。


何があったのか

テンプレートにはしっかり書いたHTMLエスケープとメソッド。

しっかりとメソッドもテンプレート側にオブジェクトとして渡している。

が、何も表示されない。デバッグログにも何もなし。


結論


tbody要素直下にエスケープ文字列を入れていた。

つまりこう書いていた。


template.html

<table>

<! -- 中略 -- >
<tbody>
{{this.hogefuga()}}
</tbody>
</table>


tbody直下には文字列なんて来ない。

ということでよろしくMozilla Developer Network先生。

HTMLTableSectionElement - Web API インターフェイス | MDN

とりあえず言えることは、こいつには 文字列を格納するプロパティはない ということである。

そのため、それが処理できずに消失するという現象が発生したと思われる。

ということで、

詳しい方、もっと良い解説お願いしますorz