How to fire javascript function when div is loaded (but do not wait, while will be loaded entire document)?

I'm using menus, tabstrips, etc. on my HTML page, which needs to be initilized in JavaScript, for example:

<ul class="k-menu">
...some menu items
</ul>
<script type="text/javascript">$('.k-menu').kendoMenu();</script>
// This works without any problem

Now I want to remove the from HTML and put into the separate JS file.

$('ul.k-menu').each((i, menu) => {
        if ($(menu).data('kendoMenu') === undefined) {
            $(menu).kendoMenu();
        }
});

But now, how can I fire kendoMenu immediately after loading the ul element? When I will use the following example, the kendoMenu will be initialized after document will be loaded:

$(document).ready(function() {
    $('ul.k-menu').each((i, menu) => {
        if ($(menu).data('kendoMenu') === undefined) {
            $(menu).kendoMenu();
        }
    });
});

But I don't want wait until entire document will be loaded. I want to run the code after element will be loaded (before loaded entire document).

I tryied to use setTimenout, but I cant be sure, if element is loaded before timout will fire.

setTimeout(() => {
  $('ul.k-menu').each((i, menu) => {
        if ($(menu).data('kendoMenu') === undefined) {
            $(menu).kendoMenu();
        }
    });
}, 100);