[JavaScript]HTMLをinnerHTMLで追加したときにscriptタグを実行させる方法

JavaScriptNagaoShun

JavaScriptで、HTMLテキストをもとにDOMを追加する場合、例えば、

const doctext = `<script>alert("test")</script>`
document.getElementById("aaa").innerHTML = doctext;

のように、innerHTMLでDOMを追加した時には、scriptタグを追加しても実行されません。そこで、HTMLの中身のscriptタグ全てを実行するようにHTMLを追加するコードを紹介します。

scriptタグを実行しながらHTMLを追加する関数

ES6に対応しています。

window.setInnerHTML = function(elm, html) {
  elm.innerHTML = html;
  Array.from(elm.querySelectorAll("script")).forEach( oldScript => {
    const newScript = document.createElement("script");
    Array.from(oldScript.attributes)
      .forEach( attr => newScript.setAttribute(attr.name, attr.value) );
    newScript.appendChild(document.createTextNode(oldScript.innerHTML));
    oldScript.parentNode.replaceChild(newScript, oldScript);
  });
}

使い方

const doctext = `<script>alert("test")</script>`
setInnerHTML(document.getElementById("aaa"),doctext);
タグ: Javascript