无法在“节点"上执行"appendChild":新的子元素为null [英] Failed to execute 'appendChild' on 'Node': The new child element is null
问题描述
这个奇怪的错误使我半小时不安.我正在动态尝试仅使用JavaScript来应用滑块.关于为什么这发生在我的任何想法?我可以在SO上找到其他问题，但无法理解解决方案.我是JS的新手，非常感谢有人可以用外行的方式向我解释事物.这是我的代码.
This weird bug is bugging me from half an hour. I am dynamically trying to apply a slider using only JavaScript. Any idea as to why this is occurring to me? I could find other questions on SO, but could not understand the solution. I am new to JS and highly appreciate if someone could explain me things in laymen terms. Here is my code.
标记
<!DOCTYPE html>
<html>
<head>
<title>JS sample test page</title>
<link rel="stylesheet" type="text/css" href="jquery.bxslider.css">
</head>
<body>
<div class="og-fullimg"></div>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery.bxslider.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
JAVASCRIPT
// code for thumbnail slider begins
(function() {
var ogImg = document.getElementsByClassName("og-fullimg");
alert(ogImg.length);
var bxSlider = document.createElement("ul"); //created ul
bxSlider.setAttribute("class", "bxslider"); // gave a class name bxslider.
for (i = 1; i < 4; i++) {
var itemsList = document.createElement("li");
var linkImages = document.createElement("img");
linkImages.src = "images/bid_" + i + ".jpg";
itemsList.appendChild(linkImages);
bxSlider.appendChild(itemsList);
}
ogImg[0].appendChild(bxSlider);
document.body.appendChild(ogImg); //append everything to the body.
//call the slider.
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
pager: false,
adaptiveHeight: true,
slideWidth: 550
});
});
}());
// code for thumbnail slider ends.
谢谢.
推荐答案
此处有多个问题:
-
document.body.appendChild(ogImg);是错误的.ogImg是一个nodeList.您不能直接将nodeList附加到主体，并且它已经在DOM中(您可以通过document.getElementsByClassName("og-fullimg");.
document.body.appendChild(ogImg);is just wrong.ogImgis anodeList. You can't directly append anodeListto the body AND it's already in the DOM (you just got it withdocument.getElementsByClassName("og-fullimg");.
您正在使用 $(document).ready()等待调用.bxSlider()，但没有使用它来调用 document.getElementsByClassName().我的猜测是您的代码运行得太早了.如果是这种情况，则只需将您的所有代码放入 .ready()处理程序中即可.
You are using $(document).ready() to wait to call .bxSlider(), but NOT using it to call document.getElementsByClassName(). My guess would be your code is just running too soon. If that is the case, then just put all your code inside the .ready() handler.
当将普通javascript切换到jQuery时，您会使用普通javascript和jQuery的非常奇怪的混合，这会使您的代码更小，更一致.如果您有jQuery，则也可以将其用于其擅长的功能(这是选择器和对集合的操作-等等).
You're using a very odd mix of plain javascript and jQuery when switching the plain javascript over to jQuery could make your code smaller and more consistent. If you have jQuery, you may as well use it for what it's good at (which is selectors and operations on collections - among other things).
这是我的建议:
//create and initialize the slider.
$(document).ready(function() {
var bxSlider = $("<ul class='bxslider'></ul>"), img;
for (var i = 1; i < 4; i++) {
img = new Image();
img.src = "images/bid_" + i + ".jpg";
$("<li>").append(img).appendTo(bxSlider);
}
bxSlider.appendTo(".og-fullimg");
bxSlider.bxSlider({
auto: true,
pager: false,
adaptiveHeight: true,
slideWidth: 550
});
});
这篇关于无法在“节点"上执行"appendChild":新的子元素为null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
