Javascript JS错误消息textContent设置为空

我对JS和web开发领域相当陌生，如果我的问题有点乏味，请提前道歉

我写了这段代码：

var breakfast = new Object();
breakfast.food = "croissant";
breakfast.extra = ["mushroom", "cheese"];
breakfast.eat = function(){return this.food + " with " +  this.extra[0];}
var elBreakfast = document.getElementById("breakf");
elBreakfast.textContent = breakfast.eat();

我从浏览器中收到一条错误消息：

"Uncaught TypeError: Cannot set property 'textContent' of null"... 

我做错了什么

---

谢谢

这里唯一重要的代码是

document.getElementById（“breakf”）。您的浏览器似乎无法在HTML标记中查询ID为
breakf
的元素

因此，您需要在浏览器中实时检查HTML代码。检查是否存在id=breakf的HTML节点。如果没有，您应该正确地接收到该错误。
尝试在html页面中添加脚本引用body末尾标记，以便它将加载breakf元素，然后应用break.eat（）
 错误来自这里的
document.getElementById（“breakf”）
。
浏览器似乎找不到id为
breakf
的节点

检查带有
id=“breakf”
的节点的html代码，如果该节点不存在，请将其添加到要写入文本的节点中，该节点应该是良好的。
id是否正确？它是
breakf
？它意味着
elBreakfast
为空
getElementById
如果元素不存在，则返回
null
。可以放入html代码吗？谢谢各位，它已排序。这是一个愚蠢的错误。在html中，我将脚本链接放在id标记之前。因此，脚本运行时“breakf”不存在。谢谢你的帮助@CamC我认为如果你把你的评论写成answear会很有用。世界上还有很多其他愚蠢的人。（包括我……）