interHtml不执行script

背景

在html单页面想动态加载html，但设置interHtml发现默认<script></script>不能执行，然后google了一下

interheml 设置的内容会当成普通文本，不会执行里面的Js

解决方案

我们设置的动态设置的元素，可以动态创建script 替换原来的script就可以触发执行

代码

function createNewElementFromOld(elm, tag){
    Array.from(elm.querySelectorAll(tag)).forEach( oldEle => {
        const newScript = document.createElement(tag);
        Array.from(oldEle.attributes)
          .forEach( attr => newScript.setAttribute(attr.name, attr.value) );
        newScript.appendChild(document.createTextNode(oldEle.innerHTML));
        oldEle.parentNode.replaceChild(newScript, oldEle);
      });
}

var setInnerHTML = function(elm, html) {
    elm.innerHTML = html;
    createNewElementFromOld(elm, "script");
  }