通过ID获取元素将返回null

Question

const data = [{color : "red"},{color : "blue"}, {color : "green"} ];

function libraryRoot() {
  load();
  return (`<div id="appDiv">
                    ${data.map(function(value){
                    	return `<div><p>Color ${value.color} from libraryRoot</p>`
                    }).join("")}  
                </div>
              `);
}

window.onload = libraryRoot;

function load() {
  let a = document.getElementById("appDiv");
  console.log(a);
}

let defaultLayout = libraryRoot();
document.getElementById("root").innerHTML = defaultLayout;

<div>
  <div id="root"></div>
</div>

嗨，我按照大家的建议修改了脚本，但是仍然在第一个实例的返回值上显示null，然后打印div。你们可以在发生错误的情况下帮助我。

我想做的就是我想调用“ appDiv” id并为其添加按钮功能。就像点击{//做某事}。

更新Codepen Project

Answer 1

在将元素写入DOM之前，您将无法访问它。注意document.getElementById（）中的单词document。这是文档API的一种方法。DOM代表文档对象模型。

Answer 2

第一个问题是您首先调用load()，它正在尝试访问尚不存在的appDiv节点。因此，请重新考虑其顺序。