Leaflet.markercluster onclick error - Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

Question

I am trying to call a function on click to .append some text outside the map canvas. This example from the docs seems to have what I'm looking for, but I haven't been able to successfully apply it to my project.

The code I've tried:

var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }),
  latlng = L.latLng(60, -100);

var map = L.map('map', {center: latlng, zoom: 4, layers: [tiles]});
var progress = document.getElementById('progress');
var progressBar = document.getElementById('progress-bar');

function updateProgressBar(processed, total, elapsed, layersArray) {
  if (elapsed > 1000) {
    progress.style.display = 'block';
    progressBar.style.width = Math.round(processed/total*100) + '%';
  }

  if (processed === total) {
    progress.style.display = 'none';
  }
}

var markers = L.markerClusterGroup({ chunkedLoading: true, chunkProgress: updateProgressBar });
var markerList = [];

function populate() {
  getCoordinates(function (data) {
    for (var i in data) {
      var a = data[i];
      var title = a.id;
      var marker = L.marker(L.latLng(a.lat, a.lng), {title: title});
      marker.bindPopup(title);
      markers.addLayer(marker);
      markerList.push(marker);
    }

    map.addLayer(markers);
  });
}

This is the error from the console of Chrome when clicking on a marker, using leaflet 1.0 beta:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
  L.Popup.L.Layer.extend._updateContent @ leaflet-src.js:4462
  L.Popup.L.Layer.extend.update @ leaflet-src.js:4373
  L.Popup.L.Layer.extend.onAdd @ leaflet-src.js:4308
  L.Layer.L.Evented.extend._layerAdd @ leaflet-src.js:2534
  L.Map.L.Evented.extend.whenReady @ leaflet-src.js:2382
  L.Map.include.addLayer @ leaflet-src.js:2558
  L.Map.include.openPopup @ leaflet-src.js:4592
  L.Layer.include.openPopup @ leaflet-src.js:4684
  L.Layer.include._openPopup @ leaflet-src.js:4746
  L.Evented.L.Class.extend.fire @ leaflet-src.js:488
  L.Map.L.Evented.extend._fireDOMEvent @ leaflet-src.js:2363
  L.Map.L.Evented.extend._handleDOMEvent @ leaflet-src.js:2331handler @ leaflet-src.js:6945

Answer 1

The error is generated by the popup, has nothing to do with your click event/handler. When clicking a marker, it's popup tries to set it's content to the title variable which isn't defined.