Skip to main content
3 / 4
BODY の値を設定するようにコード修正
user18851
  • 1,238
  • 8
  • 6

もう少し方法がないかなと思って、
本家 で 検索してみたら こういう方法が 紹介されていました。
https://stackoverflow.com/questions/10585029/parse-an-html-string-with-js

var parser = new DOMParser();
var htmlDoc = parser.parseFromString(txt, 'text/html');

これで HTMLDocument が生成されるので その中の body の中の要素を設定します。

var parser = new DOMParser();
var htmlDoc = parser.parseFromString("<table><tr><td>1</td></tr></table>", 'text/html');
outputElement.appendChild(htmlDoc.body.firstChild);

とすると ページ全体の DOM が構築まえでも 指定の エレメントに DOM 構築されたHTMLを設定できるようです。

[MDN によると][1] IE10 以降であれば 利用できそうです。

利用する環境が 限定できるなら、当初の目的に一番近い方法だと思います。


MDN に書かれていたサンプルコードのリンク先を見ましたが、
他のブラウザの対策も必要なようで、ちゃんと動作させるためには 下記リンク先のように該当機能が存在するか判定する処理が必要となるようです。
https://gist.github.com/1129031
[1]: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#Browser_compatibility

user18851
  • 1,238
  • 8
  • 6