Cannot add event listener in Google Colaboratory output cell

Question

I tested some javascript library for data visualization. It didn't run. So I tried the simplest thing until I found that the problem is with window.addEventListener .

Start with import

from IPython.display import HTML

Then, this code can run.

HTML('''
<script>
document.body.appendChild(document.createTextNode('Hello'))
</script>
''') # Hello

But this one doesn't run.

HTML('''
<script>
window.addEventListener('DOMContentLoaded', function() {
    document.body.appendChild(document.createTextNode('Hello'))
});
</script>
''')

Did I make a mistake somewhere?

How can I add an event listener properly for output in Colab?

Answer 1

Before your HTML output is inserted into the output iframe, the DOMContentLoaded event has already fired. Loading the output frame is a prerequisite for handling output items like the HTML object.