addEventListener after appendChild

Question

I create an element, eltTooltip, with document.createElement etc and add it to the DOM like this (idTooltip contains the id of eltTooltip):

document.body.appendChild(eltTooltip);
var addedElt = document.getElementById(idTooltip);
addedElt.addEventListener("click", function(){...});

Is the click event guaranteed to be added here, or is perhaps the DOM not ready for that?

Could I do this in a better way? (The page is loaded long ago so window.onload can not be used. And I can't use jQuery here.)

Answer 1

Your way works perfectly fine but it's probably better to attach the event listener before you add it to the DOM using eltTooltip. This saves you from fetching the element from the DOM.

Demo

var idTooltip = 'test';
var eltTooltip = document.createElement('div');
eltTooltip.innerHTML = "test"
eltTooltip.setAttribute('id', idTooltip);
eltTooltip.addEventListener("click", function () {
    alert('click');
});

document.body.appendChild(eltTooltip);

Answer 2

You could do something like this

window.onload = function (){
    var toolTip = document.createElement('div');
    toolTip.innerHTML = "someData";
    toolTip.addEventListener('click', myfunction);
    document.body.appendChild(toolTip);

    function myfunction(){
        alert("hello guys ");
    }
}