window.addEventListener works only after a refresh-CodePudding

I need a little help for one function which is working only after a refresh. I`m not experienced with javascript and i need just to add one small "div" to already compliled project.

The index.html is

... 
<body>
<script src="runtime-es2015-container.js" type="module">
<script src="runtime-es5-container.js" nomodule defer>
<script src="polyfils-es-5.js" defer>

<script>
 window.addEventListener("DOMContentLoaded", function() {
 setTimeout(() => {
   let envContainer = document.querySelector('.info');
   envContainer.setAttribute('style', 'flex-direction:column:');
   let envRow = document.createElement('div');
   envRow.classList.add('instance');
   envContainer.appendChild(envRow).innerText = 'some text ';
   },100);
 }
 ....

The functional is working only after refreshing the page. I gues the problem is with selecting the '.info' , which is loaded before the function is executed.

Thanks, Svetoslav

CodePudding user response：

I see you have some errors in the code, try using this code which i fixed and changed a little bit and let me know if it works

<script>
 window.addEventListener("load", function() {
 setTimeout(() => {
   let envContainer = document.querySelector('.info');
   envContainer.setAttribute('style', 'flex-direction:column');
   let envRow = document.createElement('div');
   envRow.classList.add('instance');
   envContainer.appendChild(envRow).innerText = 'some text ';
   },100);
 }
</script>

CodePudding user response：

Just made a testrun of this and it seem to be working just fine, the only thing that was missing from your code was a ) in the end..

To me it looks like your problem is elsewhere. Well unless the info object is not created by code, then the problem is that it does not yet exist when you run this code..

window.addEventListener("DOMContentLoaded", function() {
 setTimeout(() => {
   let envContainer = document.querySelector('.info');
   envContainer.setAttribute('style', 'flex-direction:column:');
   let envRow = document.createElement('div');
   envRow.classList.add('instance');
   envContainer.appendChild(envRow).innerText = 'some text ';
   },100);
 })

<body>
<div id="info" >this</div>