JavaScript仅在Fiddle/Codepen生效，本地HTML运行失效如何排查

问题原因&修复方案 #

1. 脚本执行时机错误 #

你写的DOM操作代码需要先等页面渲染出.team-bar-1节点才能生效，如果你的JS代码放在<head>标签里或者放在.team-bar-1元素的前面加载，代码执行时目标DOM还不存在，document.querySelector('.team-bar-1')会返回null，功能自然无法触发。
修复方式：
将JS代码放到</body>结束标签的前面，或者用DOM加载完成事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
    function multiplyNode(node, count, deep) {
        for (var i = 0, copy; i < count - 1; i++) {
            copy = node.cloneNode(deep);
            node.parentNode.insertBefore(copy, node);
        }
    }
    multiplyNode(document.querySelector('.team-bar-1'), 15, true);
})

2. HTML语法错误 #

你的HTML存在两处会导致DOM结构异常的语法问题：

• 缺失<body>标签：</head>结束后需要紧跟<body>，所有页面可见内容必须放在<body>内部
• a标签未正确闭合：你写的<a href="C:\Users\Vincent\Desktop\Website\N1\team-page.html"</a>缺少右尖括号，且.team-bar-1被放在了a标签外部，如果要实现点击队伍栏跳转，需要把.team-bar-1放到a标签内部。

修复后的HTML参考：

<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 队伍栏 -->
<div class="teams-main-container">
    <a href="C:\Users\Vincent\Desktop\Website\N1\team-page.html">
        <div class="team-bar-1">
            <img src='C:\Users\Vincent\Desktop\Website\Images\EUROPE.png' width="35px" height="20px" class="E_U">
            <h1 class="team-name">Les papillons verts</h1>
            <h1 class="number-of-players">0/3</h1>
        </div> 
    </a>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    function multiplyNode(node, count, deep) {
        for (var i = 0, copy; i < count - 1; i++) {
            copy = node.cloneNode(deep);
            node.parentNode.insertBefore(copy, node);
        }
    }
    multiplyNode(document.querySelector('.team-bar-1'), 15, true);
})
</script>
</body>
</html>

3. 重复ID问题 #

你原来的team-name和number-of-players使用了id属性，节点克隆后会出现多个相同ID的元素，不符合HTML规范，也会导致后续元素选择异常，把它们改成class属性，同时将CSS里的#team-name、#number-of-players选择器同步改成.team-name、.number-of-players即可。

关于jQuery引入的说明 #

你实现的功能是纯原生JS编写的，完全不需要依赖jQuery，引入jQuery后没有效果是因为你的代码根本没有调用这个库的能力，和引入的库版本无关。

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