Create innerHTML and retrieve its HTML

Question

I create Google chart base64 image <img src="data:image/png;base64, ivbO..."> :

google.visualization.events.addListener(my_chart, 'ready', function () {
   chart_div.innerHTML = '<img src="' + my_chart.getImageURI() + '">';
});

But when I want to retrieve the html of this div and the image for later use like so:

document.addEventListener('DOMContentLoaded', function() {
   var html_data = document.getElementById('img_container');
   console.log(html_data.innerHTML);
}, false);

I only get empty div without the image <img src="data:image/png;base64, ivbO...">

ID is correct and all other markup so no mistake there.

Answer 1

The HTML doesn't get set until the Google Chart Ready event fires. That happens after the document's DOMContentLoaded event.

google.visualization.events.addListener(my_chart, 'ready', function () {
   chart_div.innerHTML = '<img src="' + my_chart.getImageURI() + '">';
   var html_data = document.getElementById('img_container');
   console.log(html_data.innerHTML);
});