从数据属性异步加载多个JS正常吗？答案

【问题标题】：Async load multiple JS from data attribute is it normal?从数据属性异步加载多个JS正常吗？
【发布时间】：2016-12-23 14:36:24
【问题描述】：

我将几个 JS 文件放在我的 div 的属性中，然后让它们“追加头”

<div id='asyncjs' data-asyncjs='
<script src="/jquery.js"></script>
<script src="/file1.js"></script>
<script src="/file2.js"></script>
<script src="/file3.js"></script>
<script src="/file4.js"></script>
'></div>

<script>
var src = document.getElementById("asyncjs");
var magic = src.getAttribute("data-asyncjs");
$('head').append(magic);
</script>

有效。但是正常使用吗？

附：我也尝试使用

document.head.appendChild(magic)

改为

$('head').append(magic);

但这是一个错误……为什么？

【问题讨论】：

错误是什么？
无法在“节点”上执行“appendChild”：参数 1 不是“节点”类型。
它工作，但你有一个错误？！所以它不起作用..在所有情况下，即使您的浏览器处理了它，将 HTML 放在属性上也不是正确的做法
У меня все действительно работает。 Всовременныхбраузерах。
这一切真的很有效。在现代浏览器中。

标签： javascript asynchronous

【解决方案1】：

它有效。但是正常使用吗？

看起来不太正常，属性中有<符号是无效的。如果您需要异步加载脚本，为什么不在实际的<script> 标签上使用async 属性？

<script src="/jquery.js" async="async"></script>
<script src="/file1.js" async="async"></script>
<script src="/file2.js" async="async"></script>
<script src="/file3.js" async="async"></script>
<script src="/file4.js" async="async"></script>

但这是一个错误……为什么？

因为您不能将字符串传递给.appendChild()。它只接受节点。如果您必须使用这种方法，您可以创建一个div，设置它的innerHTML，然后将其附加到文档头部。

var scriptDiv = document.createElement('div');
scriptDiv.innerHTML = magic;
document.head.appendChild(scriptDiv);

【讨论】：

> 为什么不在实际的
我不能。原因是我通过后端 cms 获得的带有 JS 列表的数组 - 我不会编辑 cms 的源代码
@TravisCat 好的，你没有在你的问题中解释任何这些，所以很难为你提供一个有价值的答案。但是我已经解释了为什么会出现错误以及如何使用 vanilla JS 来解决它。