jQuery .prepend to non-existent element - is it a JS bug?

Question

I want to prepend a form to an element on a page right after the parent element is added to DOM. When I prepend too early, ie the parent element doesn not exist yet I get a strange beheavor.

jQuery(".myDiv").prepend('<div id="myForm">Content</div>');

If I check the existance of the prepent element right after with jQuery or even with JS like this:

var res = document.getElementById("myForm")
console.log(res);

I get the prepend element in console. But if the parent element didn't exist yet then no prepend element appears on the page and if I check the same element one second later:

setTimeout(function() {
    var res = document.getElementById("myForm")
    console.log(res);
}, 1000);

then I get null

After looping through this when the parent element finnaly gets added to the page my prepend element does not disappear.

So it looks like whatever I prepend gets added to the DOM first but then get's rejected by DOM after it is found that the parent element does not exist. But is this a normal beheavor?

Answer 1

It's working great.

 // When div is present jQuery(".myDiv").prepend('<div id="myForm">Content</div>'); var res = document.getElementById("myForm") console.log('mydiv:',res); setTimeout(function() { var res = document.getElementById("myForm") console.log('mydiv:',res); }, 1000); // When div is not present jQuery(".noDiv").prepend('<div id="noForm">Content</div>'); var res = document.getElementById("noForm") console.log('noForm:',res); setTimeout(function() { var res = document.getElementById("noForm") console.log('noForm:',res); }, 1000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="myDiv"></div> 

I think you are removing the item after the item is added. It's an assumption