Parsing kml file like xml file

Question

I am trying to parse my kml files to get the locations of the placemarks and add html links to those locations so that when clicked the map will pan to the location the user clicked on. However with the code I have now it will not parse the file correctly, and gives me this error

Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null.

I assume this error mens that when it was going to add the link for the location the parser returned a null value. I am pretty sure that I am doing the calls correctly but still not sure why this error is popping up, can anyone help?

    var map = null;
var KMLLayer = null;
var KMLayer2 = null;
var item = "";
var nav = [];
$(document).ready(function(){
    //initialise a map
    initialize();
$.get("/img/Keenelandlayer2.kml", function(data){
        var html = "";
        //loop through placemarks tags
        $(data).find("Placemark").each(function(index, value){
            //get coordinates and place name
            coords = $(this).find("coordinates").text();
            place = $(this).find("name").text();
            test = "test";
            //store as JSON
            c = coords.split(",")
            nav.push({
                "place": place,
                "lat": c[0],
                "lng": c[1]
            });
            //output as a navigation
            html += "<li>" + place + test + "</li>";
            item = "<li>" + place + test + "</li>";
            document.getElementById("list").appendChild(item);
        })
        //output as a navigation
        $(".navigation").append(html);
        //bind clicks on your navigation to scroll to a placemark
        $(".navigation li").bind("click", function(){
            panToPoint = new google.maps.LatLng(nav[$(this).index()].lng, nav[$(this).index()].lat);
            map.panTo(panToPoint);
        });
    });
}); 
function initialize() {
var mapOptions = {
  center: new google.maps.LatLng( 38.04798015658998, -84.59683381523666),
  zoom: 16,
  disableDefaultUI: true,
  zoomControl: true,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};
var kmlOptions = {
suppressInfoWindows: true,
preserveViewport: false,
map: map
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    KMLLayer = new google.maps.KmlLayer({url: 'https://sites.google.com/site/cs499fbt/files/Keenelandlayer1.kml'}, kmlOptions);
    KMLLayer2 = new google.maps.KmlLayer({url:'https://sites.google.com/site/cs499fbt/files/Keenelandlayer2.kml'},kmlOptions);

    KMLLayer.setMap(map);
    google.maps.event.addListener(map, "zoom_changed",function() {
        //below is the line that prevents the labels to appear, needs to be there to allow the second kml layer to be displayed
        event.preventDefault();
        if (!!map){
            var zoom = map.getZoom();
            if (zoom < 16){
                if (!!KMLLayer2.getMap()) KMLLayer2.setMap(null);
                if (!KMLLayer.getMap()) KMLLayer.setMap(map);
            }
            else{
                if (!KMLLayer2.getMap()) KMLLayer2.setMap(map);
                if (!!KMLLayer.getMap()) KMLLayer.setMap(null);
            }
        }
    });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

item is not a node, it's simply a string which may not be used as argument for appendChild .

Create a node:

item = document.createElement('li');
item.appendChild(document.createTextNode(place + test));
document.getElementById("list").appendChild(item);

or use jQuery(like you do it a few lines later):

$('#list').append($("<li>" + place + test + "</li>"));