Question

Adding new html string into the page:

document.getElementById('container').innerHTML = '<div id="child"></div>';

Is there an event that let me know when child element is in the document?

I have a function, which return some html codeas a string. And when this html will be added in the document, I need to execute javascript function. I’ve tried to use inline onload event

document.getElementById('container').innerHTML = '<div id="child" onload="console.log(\'ready!\');"></div>';

but it does not seem to work.

UPDATE:
Probably, I should provide more details about the situation. I have a library function

myLibrary.getHtml()

In old version, users just call this function and append the result into the document:

document.getElementById('container').innerHTML = myLibrary.getHtml();

In new version, the result is not a plain html. Now users can interact with it after they append it in the document. So after they append html into the document, I need to go through the result DOM and attach event handlers, hide some elements and other things. That is why, I need to know when they add it in the document and execute a javascript function, which turn plain html into fancy interactive widget.

Answer 1

Solved by myself this way:

myLibrary.getHtml = function() {
    var html;
    ...
    var funcName = 'initWidget' + ((Math.random() * 100000) | 0);
    var self = this;
    window[funcName] = function() { self._initWidget(); };
    return html + '<img src="fake-proto://img" onerror="' + funcName + '()"';
}

The idea behind the code is that I specify incorrect url for the src attribute of the img tag and the image triggers error event and call my function. Quite simple 🙂