Javascript DOM errors

Question

this is my javascript code , I am trying to create a dynamic list in HTML with data I recieve from the server , The data is of type \"json\"

My Javascript snippet

Answer 1

I tried to cut it down to the barebones and I'm pretty sure the fact that link is undefined is the reason you get an error when you call appendChild. It's certainly the first error I found in the console in Firebug. The following barebones sequence works in Firefox (sorry I don't have Chrome):

    var json =[
        {"pictureURL":"/test1.jpg/","title":"test1"},
        {"pictureURL":"/test2.jpg/", "title":"test2"},
        {"pictureURL":"/test3.jpg", "title":"test3"}
    ];
    function displayBook(title){
        alert(title);
        return false;
    }
    function addBooks(data) {
        var  newdata=document.getElementById('addBooks');
        var parent = document.getElementById('gBookList');
        var listdiv = document.createElement('li');
        listdiv.id = 'gBookListDiv';
        listdiv.innerHTML = "Books Found:";
        parent.appendChild(listdiv);
        for(var i=0;i

I discovered from this answer JavaScript: changing the value of onclick with or without jQuery that I had to use setAttribute to add the onclick handler. I'm used to adding other attributes like id directly as mentioned by adeneo without calling setAttribute.