[英]How do I solve this “Cannot read property 'appendChild' of null” error?
我尝试使用下面的代码，在我的网站上添加幻灯片中的按钮：
window.onload = function loadContIcons() {
var elem = document.createElement("img");
elem.src = "http://arno.agnian.com/sites/all/themes/agnian/images/up.png";
elem.setAttribute("class", "up_icon");
var id = "views_slideshow_controls_text_next_slideshow-block";
if (id !== 0) {
document.getElementById(id).appendChild(elem);
} else console.log("aaaaa");
var elem1 = document.createElement("img");
elem1.src = "http://arno.agnian.com/sites/all/themes/agnian/images/down.png";
elem1.setAttribute("class", "down_icon");
var id1 = "views_slideshow_controls_text_previous_slideshow-block";
if (id1 !== 0) {
document.getElementById(id1).appendChild(elem1);
} else console.log("aaaaa");
}
在首页上，我有幻灯片显示一切正常，但在其他页面上错误Cannot read property 'appendChild' of null发生。
该元素尚未附加，因此它等于null。 Id永远不会= 0.当你调用getElementById（id）时，它是null，因为它不是dom的一部分，除非你的静态id已经在DOM上了。 通过控制台进行呼叫以查看它返回的内容。
只需重新排序或确保在JavaScript之前加载DOM或HTML。
您的条件id !== 0将始终与零不同，因为您正在分配字符串值。 在views_slideshow_controls_text_next_slideshow-block具有id views_slideshow_controls_text_next_slideshow-block的元素的页面上，您仍将尝试追加img元素，这会导致Cannot read property 'appendChild' of null错误。
您可以分配DOM元素并验证它是否存在于页面中，而不是分配字符串值。
window.onload = function loadContIcons() {
var elem = document.createElement("img");
elem.src = "http://arno.agnian.com/sites/all/themes/agnian/images/up.png";
elem.setAttribute("class", "up_icon");
var container = document.getElementById("views_slideshow_controls_text_next_slideshow-block");
if (container !== null) {
container.appendChild(elem);
} else console.log("aaaaa");
var elem1 = document.createElement("img");
elem1.src = "http://arno.agnian.com/sites/all/themes/agnian/images/down.png";
elem1.setAttribute("class", "down_icon");
container = document.getElementById("views_slideshow_controls_text_previous_slideshow-block");
if (container !== null) {
container.appendChild(elem1);
} else console.log("aaaaa");
}
对于所有面临类似问题的人，当我尝试运行特定的代码片段时，我遇到了同样的问题，如下所示。
<html>
<head>
<script>
var div, container = document.getElementById("container")
for(var i=0;i<5;i++){
div = document.createElement("div");
div.onclick = function() {
alert("This is a box #"+i);
};
container.appendChild(div);
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
https://codepen.io/pcwanderer/pen/MMEREr
由于document.getElementById返回null并且null没有名为appendChild的属性，因此抛出错误。 要解决此问题，请参阅下面的代码。
<html>
<head>
<style>
#container{
height: 200px;
width: 700px;
background-color: red;
margin: 10px;
}
div{
height: 100px;
width: 100px;
background-color: purple;
margin: 20px;
display: inline-block;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var div, container = document.getElementById("container")
for(let i=0;i<5;i++){
div = document.createElement("div");
div.onclick = function() {
alert("This is a box #"+i);
};
container.appendChild(div);
}
</script>
</body>
</html>
https://codepen.io/pcwanderer/pen/pXWBQL
我希望这有帮助。 :)
我该如何解决？ “未捕获的TypeError：无法读取null的属性'appendChild'”
[英]How do I solve this? “Uncaught TypeError: Cannot read property 'appendChild' of null”
为什么我会收到错误“无法读取属性 'appendChild' of null”
[英]Why did I get an error “Cannot read property 'appendChild' of null”
我不断在 Image.img.onload 错误处收到 null 的“无法读取属性 'appendChild”
[英]I keep getting the 'Cannot read property 'appendChild' of null at Image.img.onload error
未捕获的类型错误：无法读取 null 的属性“appendChild”
[英]Uncaught TypeError: Cannot read property 'appendChild' of null
未捕获的TypeError：无法读取null的属性'appendChild'？
[英]Uncaught TypeError: Cannot read property 'appendChild' of null?
Nebular Toastr > 无法读取 null 的属性“appendChild”
[英]Nebular Toastr > Cannot read property 'appendChild' of null
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.