Ошибки Javascript DOM
это мой код JavaScript, я пытаюсь создать динамический список в HTML с данными, которые я получаю с сервера. Данные имеют тип & quot; json & quot;
Мой фрагмент JavaScript
function addBooks(data) { // USing DOM to populate the tables
//var newdata=document.getElementById('addBooks');
//newdata.setattribute()
//get the unordered list
var newdata = document.getElementById('addBooks');
var parent = document.getElementById('gBookList');
//removeChildrenFromNode(parent);
//create list divider
var listdiv = document.createElement('li');
listdiv.setAttribute('id', 'gBookListDiv');
listdiv.innerHTML = ("Books Found:");
parent.appendChild(listdiv);
// (this is where the first error happens)
//create dynamic list
for (i = 0; i < data.length; i++) {
// (this is where the second error happens)
//create each list item
var listItem = document.createElement('li');
listItem.setAttribute('id', 'gBookListItem');
parent.appendChild(listItem);
//var link = document.createElement('a');
//link.setAttribute('onclick','displayBook(data[i])');
//link.setAttribute('href','#FindBook)');
//listItem.appendChild(link);
var pic = document.createElement('img');
pic.setAttribute('src', data[i].pictureURL);
pic.setAttribute('width', '80px');
pic.setAttribute('height', '100px');
pic.setAttribute('style', 'padding-left: 10px');
link.appendChild(pic);
var brk = document.createElement('br')
link.appendChild(brk);
var title = document.createElement('p');
title.innerHTML = data[i].title;
title.setAttribute = ('style', 'float:right');
link.appendChild(title);
var author = document.createElement('p');
author.innerHTML = data[i].author;
link.appendChild(author);
}
var list = document.getElementById('gBookList');
// $(list).listview("refresh");
}
/*function removeChildrenFromNode(node){
while (node.hasChildNodes()){
node.removeChild(node.firstChild);
}
//}*/
Мой HTML-код
<!DOCTYPE html>
<head>
<script ...>
<head>
<body onLoad="addBooks()">
<div id="addBooks" class="row-fluid">
<div id="gBookList">
</div>
</div>
</body>
</html>
Я получаю следующую ошибку, которая не позволяет мне заполнить список, я использую Chrome
1) Uncaught TypeError: Невозможно вызвать метод 'appendChild & apos; нуля
2) Uncaught TypeError: Невозможно прочитать свойство "длина" неопределенного
Я не понимаю, почему это должно происходить, поскольку команды .length возвращают правильное целое число (количество объектов json), когда я отлаживаю с помощью окна предупреждения.
функция, которая вызывает это
$.ajax({
type: 'GET',
url: ........,
dataType: "json",
complete: function (xhr, statusText) {
alert(xhr.status);
},
success: function (data, textStatus, jqXHR) {
alert(JSON.stringify(data));
window.location.replace("Page2_updated.html");
addBooks(data); // Passing JSON to be replaced on page
},
function (data, textStatus, jqXHR) {
alert(data);
alert('error');
},
редактировать
Я изменил свой HTML-файл на следующую структуру после консультации на этом форуме
<html>
<head>
</head>
<body>
<div id="1" "display:block">
</div>
<div id="2" "display:none"> // no onLoad() anymore!!
</div>
</body>
</html>
Я отредактировал эту часть в вызывающей функции
$.ajax({
type: 'GET',
url: ........,
dataType: "json",
complete: function (xhr, statusText) {
alert(xhr.status);
},
success: function (data, textStatus, jqXHR) {
alert(JSON.stringify(data));
if(document.getElementById(1).style.display == "block"){
document.getElementById(1).style.display = "none";
document.getElementById(2).style.display = "block"; }
addBooks(data); // Passing JSON to be replaced on page
},
function (data, textStatus, jqXHR) {
alert(data);
alert('error');
},
});
Но я все еще получаю следующие ошибки Uncaught TypeError: Невозможно вызвать метод & apos; appendChild & apos; нуля Uncaught TypeError: Невозможно прочитать свойство "длина" неопределенного