IE11で文字列からDOM Nodeを生成・取得したい

業務で苦戦したことがあったのでまとめ

環境

• IE(11.345)

やりたいこと

• 文字列からDOM Nodeを生成してJavaScriptで取得したい
• どんな要素でも文字列から生成できて欲しい
• <template>要素にブラウザが対応している場合は下記の方法で生成と取得が可能
  • ただしIE11は<template>要素に対応していない

function htmlToElements(html) {
    var template = document.createElement('template');
    template.innerHTML = html;
    return template.content.childNodes;
}

var rows = htmlToElements('<tr><td>foo</td></tr><tr><td>bar</td></tr>');

Creating a new DOM element from an HTML string using built-in DOM methods or Prototypeより引用

div.innerHTMLではダメなのか

• 上記のStackOverflowにも書かれているが<td>要素は親に<tr>要素しか持てない(<div>はダメ)などの制限が要素によって存在する

  • 親要素の制限については、例えば<td>なら4.9.9 The td elementのContexts in which this element can be usedに記載がある

• <tr>要素を用意してtr.innerHTMLする手もあるにはあるが...

IE11ではどうするか

• <template>要素にブラウザが対応していない場合

ライブラリを使う

• 素直な方法

jQuery(3.3.1)

var node = $( "<td>hoge</td>" );

Dojo(1.10)

• 今もDojoを使っている人がいるかは分からないけど...

var node = domConstruct.toDom("<td>hoge</td>");

その他

insertAdjacentHTML()

• ライブラリではなくWebAPI標準
• 親要素が必要なのでinnerHTMLと本質的には一緒だと思う
• 詳細はElement.insertAdjacentHTML() - Web APIs | MDNを参照

var parent = document.getElementById('hoge');
parent.insertAdjacentHTML('afterbegin', '<td>hoge</td>');

結論

• ライブラリはマルチブラウザ対応を考える場合はやはり強い...