无法使用 DOM 获取子元素

Question

我的代码如下：

function myFunction(result) {
var json = JSON.parse(result)
var jsonKeys = Object.keys(json)
var items = document.getElementById("items");
var adds = items.getElementById("add");
clearA()
var i;
for (i = 0; i < jsonKeys.length; i++) {
var btn = document.createElement("BUTTON");
console.log(jsonKeys[i]);
btn.innerHTML = jsonKeys[i]
btn.setAttribute("id", jsonKeys[i]);
btn.onclick = function() { run(this.id); }
items.appendChild(btn)
}


}

我可以获得项目并使用它们，但当我尝试获得子元素"时；添加"；我得到items.getElementById is not a function

这是html:

<div id="items">
<div id="add">
<input type="submit" value="add" onclick="foo(add)">
</div>
</div>

Answer 1

将其更改为：

var items = document.getElementById("items");
var adds = document.getElementById("add");

Answer 2

由于id在文档中是唯一的，因此只有document.getElementById存在。您可以使用items.querySelector('#id')，但这可能是一个更大问题的表现，即多个元素具有相似的HTML结构，ID重复。在这种情况下，建议您切换到类并使用items.querySelector('.classname')。