2

html created using create.js file

<div id="mode"></div>

if predefine html works

 <div class="install-align">
<div class="switch right">
  <div class="divider"></div>
  <p>
    
    <i class="add-text ">We take very little space</i>
    <a class="add-button waves-effect red waves-light btn white-text right install">INSTALL APP
      <i class="material-icons right ">cloud</i>
    </a>
    
    <label>
    READING MODE 
    <input type="checkbox" onclick="darkMode()">
    <span class="lever"></span>
    </label>
  </p>
</div>
</div>

crate.js code (half of code)This particular class isn't accessible by install.js particularly .add-button

window.addEventListener("DOMContentLoaded",(e) =>{

      var ins = document.createElement('A');
      ins.id = 'm6';
      ins.className = 'add-button waves-effect red waves-light btn white-text right install';
      ins.textContent = 'INSTALL APP';
      document.getElementById('m4').appendChild(ins);
    }

install.js

let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
const addTxt = document.querySelector('.add-text');
addTxt.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {//code here});
  • When are these `document.querySelector` calls performed? If it’s outside a `defer`-ed script, outside of `DOMContentLoaded`, or otherwise before `document.getElementById('m4').appendChild(ins);` happens, then these elements are not in the document. Of course, `document.querySelector` won’t find them there. See [Why does jQuery or a DOM method such as `getElementById` not find the element?](https://stackoverflow.com/q/14028959/4642212). – Sebastian Simon Mar 16 '21 at 11:06

0 Answers0