如果您使用JavaScript InnerHTML向DOM添加HTML元素，是否可以使用JavaScript访问这些元素？

发布于 2025-01-29 05:13:57 字数 2053 浏览 4 评论 0原文

我正在尝试使用“ InnerHTML”和Template文字的按钮的ONCLICK在DOM中添加更多HTML元素。这么多工作，但是当我尝试通过“ getElementby”或“ querySelector”访问元素时，我不能；我不知道为什么不。任何帮助都将受到赞赏，谢谢。

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)
}

原文

I am trying to add more HTML elements to the DOM with a button's onclick using "innerHTML" and template literals. That much is working, but when I try to get access to the elements via a "getElementBy" or "querySelector", I can't; and I don't know why not. Any help is appreciated, thank you.

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)
}

分享到QQ

分享到微博