6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

何があったのか

テンプレートにはしっかり書いたHTMLエスケープとメソッド。
しっかりとメソッドもテンプレート側にオブジェクトとして渡している。
が、何も表示されない。デバッグログにも何もなし。

結論

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

つまりこう書いていた。

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

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

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

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

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

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

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

6
4
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?