Estoy tratando de agregar más elementos HTML al DOM con un clic en un botón usando "innerHTML" y literales de plantilla. Eso funciona, pero cuando trato de obtener acceso a los elementos a través de "getElementBy" o "querySelector", no puedo; y no se porque no Cualquier ayuda se agradece, gracias.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Adding and grabbing HTML Elements</title> <link rel="stylesheet" href="style.css"> </head> <body> <button id="add-character">Add</button> <div id="grid"></div> </body> <script src="main.js"></script> </html>** JavaScript **
let grid=document.getElementById("grid") console.log(grid) const addCharacter=document.getElementById("add-character") console.log(addCharacter) let Hp=0; let num=0; addCharacter.addEventListener("click",()=>{ grid.innerHTML+=` <div id="subgrid" class="subgrid"> <br> <div id="status" class="status">Status</div> <br> <div id="iniative" class="iniative">Iniative</div> <input id="iniativeel" id="iniativeel" type="number"> <button id="inativebtn" class="inativebtn">Submit</button> <br> <div id="character" class="character">Character</div> <br> <div id="healthpoints" class="healthpoints">Healthpoints</div> <br> <input id="initalHp" class="initalHp" type="number"> <br> <Button id="initalhp" class="initalhp">Submit</button> <br> <input id="damage" class="damage" type="number"> <br> <button id ="damagebtn" class="damagebtn">Submit</button> <br> <div id="weapons" class="weapons">Weapons</div> </div>` }) btn() function btn(){ let iniativeBtn=document.querySelector("#iniativebtn").textContent console.log(iniativeBtn) }