Fatal编程技术网
  • javascript/
  • Javascript 加载脚本：innerHTML与appendChild

Javascript 加载脚本：innerHTML与appendChild

javascript html file dom

Javascript 加载脚本：innerHTML与appendChild,javascript,html,file,dom,loading,Javascript,Html,File,Dom,Loading,我很难将脚本动态加载到DOM中 function addScript(fileName) { document.body.innerHTML += `<script src='components/${fileName}/${fileName}.js'></script>` } addScript('message-interface') 这将成功地将我的脚本加载到DOM中 我已经检查了多次，加载到DOM上的脚本元素与这两段代码完全相同，只是使用innerHTML

我很难将脚本动态加载到DOM中

function addScript(fileName) {
  document.body.innerHTML += `<script src='components/${fileName}/${fileName}.js'></script>`
}

addScript('message-interface')
这将成功地将我的脚本加载到DOM中

我已经检查了多次，加载到DOM上的脚本元素与这两段代码完全相同，只是使用innerHTML不会将脚本加载到内存中，而append child会将脚本加载到内存中

为什么这两个结果都会产生一个DOM元素添加到我的body标记中，但其中只有一个允许加载.js文件

谢谢大家!

简单地说，因为规范这么说：

使用innerHTML插入的脚本元素在插入时不会执行

同样值得检查的是，appendChild中的安全注意事项会触发浏览器的javascript加载程序，而
innerHTML
只会触发内联CSS和图像加载程序。@zer00ne我使用+=进行追加，其中as=将覆盖。@AshokVishwakarma这很有意义，谢谢@AsheAustaire我刚注意到
+=
我想有时候我们必须接受我们的霸主规则。@AsheAustaire你可以使用
文档。写
只需确保它是加载的第一件事，其他时间不要使用它。为什么你要引用一个十年前的工作草案而不是当前的规范？@Quentin我检查了所有地方提到该工作草案，但在当前的工作草案上找不到。即使是当前的mozilla页面也指向相同的链接。但若你们在当前的规范中找到它，请随意编辑链接

function addScript() {
  let script = document.createElement('script')
  script.src ='components/message-interface/message-interface.js'
  document.body.appendChild(script)
}
addScript()