無法使用 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') 。