如何加载含多个src脚本的外部JS文件至页面指定div

1. 重写ScriptList.js文件 #

你原来的ScriptList.js直接写<script>标签没用，JS文件只会执行JS代码，得改成下面这样——把要加载的脚本统一放在数组里，再写个函数动态创建脚本元素插入到目标div：

// ScriptList.js
function GetMyScriptList() {
  // 要加载的脚本都放这，后续改这个数组就行
  const scriptList = [
    'Orange.js',
    'Apple.js',
    'Pear.js'
  ];

  const targetDiv = document.getElementById('ScriptList');
  if (!targetDiv) return; // 找不到目标div就终止

  scriptList.forEach(src => {
    const scriptTag = document.createElement('script');
    scriptTag.type = 'text/javascript';
    scriptTag.src = src;
    // 可选：加个加载状态提示，方便调试
    scriptTag.onload = () => console.log(`${src} 加载成功`);
    scriptTag.onerror = () => console.error(`${src} 加载失败`);
    targetDiv.appendChild(scriptTag);
  });
}

2. 修正HTML的小问题 #

你的HTML里<div id="ScriptList">没闭合，还有viewport属性没写全，修正后如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TITLE HERE</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="ScriptList"></div> <!-- 修正闭合标签 -->
<script type="text/javascript" src="ScriptList.js"></script>
<script>
window.onload = function() {
  GetMyScriptList();
}
</script>
</body>
</html>

核心逻辑说明 #

• 动态创建script元素是JS操作DOM的标准方式，能实现你“只改外部JS、不动HTML”的需求——以后要加新脚本，直接在ScriptList.js的scriptList数组里加新的源地址就行。
• 原来直接在JS文件里写HTML标签的方式行不通，因为浏览器加载JS文件时只会解析执行JS代码，不会处理HTML标签。

内容的提问来源于stack exchange，提问作者Rick D