因此，在Javascript中，我只能复制一次HTMl Id="characters"包装.我知道从技术上讲，它应该是一个"类"，而不是一个"Id"，因为它将是一个重复的"Id"，但出于某种原因，我没有得到；当我将"getElementById"更改为"getElementsByClassName"，将HTML"Id"更改为"class"时，它根本不会重复.也因为我在使用克隆. node (true)，我正在失go 复制包装中"addEventListeners"的功能.有没有办法只用普通的Javascript来纠正这个问题？似乎这还不够烦人，我的复制包装器似乎已经从CSS网格中消失了.这一切都非常乏味和麻烦，所以我感谢你给我的任何建议.
这是我目前的HTML.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<h1><!--D&D DM Tool--><h1>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="header-container">
<h1 id="header">Game Tools</h1>
</div>
<div class="importantbuttons">
<button id="resetbutton">Next Round</button>
<button id="orderbutton">Order</button>
<button id="zerobutton">Zero</button>
<button id="deadremoverbtn">Bring Out the Dead!</button>
<button id="addnpcbtn">Add NPC</button>
</div>
<div id="grid">
<div class="characters">
<div id="subgrid" class="subgrid" >
<div class="name-bloodiedstuff">
<div class="halfWayDown"></div>
<div class="character-name-display">Name</div>
<button class="name-submit-btn">Submit</button>
<input type="text" class="input-name-el" placeholder="Name">
<div class=int-stuf>
<div class="roll-display">Iniative</div>
<button class="iniativebtn">Submit</button>
<input type="number" class="iniative-roll-el" placeholder="Iniative Roll">
</div>
<div class="healthpoints-display">Healthpoints</div>
<button class="hp-submit-btn">Submit</button>
<input type="number" class="input-hp-el" placeholder="Total HealthPoints">
<button class="hp-deductin-btn">Submit</button>
<input type="number" class="input-hp-deduction-el" placeholder="Damage">
</div>
<div class="weapons-display">Weapons</div>
<button class="weapon-btn">Submit</button>
<input type="text" class="weapon-input-el" placeholder="Weapons">
<button class="active-btn" class="button">Active</button>
</div>
</div>
</div>
</body>
<script src="mainCopy.js"></script>
</html>
下面是我当前的Javascript复制功能.
addNpcBtn.addEventListener("click",function(){
var characterSubGrids=document.getElementsByClassName("characters");
console.log(characterSubGrids[0]);
var characterSubGridsClone=characterSubGrids[0].cloneNode(true);
let grid=document.getElementById("grid");
console.log(grid);
grid.appendChild(characterSubGridsClone);
});