Dart の appendHtml について

Question

Dartでテーブルを作成しようとして、<div> に appendHtml で <table>～</table> を追加したらテーブルとして表示されませんでした。
プログラム内で TabelElmenet をつくり、<div> に append したらテーブルとして表示されました。
この TableElement の中身は appendHtml で <tr>～</tr> を追加したものです。

appendHtml で追加できるタグ、追加できないタグがあるのでしょうか。
また、その違いは何でしょうか。

Answer 1

コメントだとコードの貼り付けなどがうまくいかないようなので、新しい回答として記述します。

ご質問の追記にあるうまくいかないコードは次のようなものだと思います。
Element tbl = new Element.div(); tbl = querySelector('#tbl'); tbl.appendHtml('<table>'); for (int i = 0; i < codes.length; i++) { if (i == 0) { tbl.appendHtml('<tr><th>$d0</th><th>$d1</th></tr>'); } else { tbl.appendHtml('<tr><td>$d0</td><td>$d1</td></tr>'); } } tbl.appendHtml('</table>');

appendHtml は "任意の Html 片の追加" と書きましたが、引数のコードをそのまま差し込むようなメソッドでもありません。

appendHtml では次の手順で追加しています。

1. 受け取ったコード片をパース
2. パース結果を元に Element を作成
3. 作成した Element を DOM ツリーに挿入

そのため、 appendHtml で開始タグと終了タグを別々に追加して挟むといったことはできません。
appendHtml に渡す Html 片が要素として整合性が取れていないので、期待どおりの結果になっていないのだと思います。

Comments

[hi_tag]

なるほど、そういうことでしたか。
開始タグと終了タグを一緒に追加してあげないといけないのですね。
ありがとうございました。

Answer 2

table が表示されていないのはテーブルの中身がなくて見えていないということはないでしょうか。
追加するときに <tr> などの要素も含めて書いていると表示されると思います。
divelem.appendHtml("<table><tr><th>foo</th><td>bar</td></tr></table>");

appendHtml にはタグに制限はなく、むしろ任意の Html のコード片を追加するためのメソッドです。
その代わり追加した要素を Element として返すこともありません。

そのため、 appendHtml で追加した要素にアクセスしたい場合は Element として取得し直す必要があります。
divelem.appendHtml("<table id='test_tbl'></table>"); querySelector("#test_tbl").appendHtml("<tr><th>foo</th><td>bar</td></tr>");

Comments

[hi_tag]

yohshiyさん、回答ありがとうございます。
質問の条件が少なすぎてすみませんでした。appendHtmlは一度ではなく、複数回に分けて行っております。
質問に追記しましたが、初めに<table>のみ、次に<th>を含む行、次に<td>、最後に</table>といった感じです。