title: Load HTML code from a file in a variable inside JS
body: <p>PhoneGap app loads an external page in inAppBrowser and injects a bottom bar in that page using executeScript(), so I can have a bar with basic controls on that particular page. That I managed to make work.</p>
  
  <p>However I would love to have this bar (basically a portion of HTML code) be dynamically loaded so I can easily add more/edit templates.</p>
  
  <p>So it goes like this in the index.html file of my test project I am playing with:</p>
  
  <pre><code>function injectDatBloodyCode() {
    iabRef.executeScript({
      file: "https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"
    }, function(){
      iabRef.executeScript({
        file: "http://blablabla.com/news-app/myScript.js"
      });
    });
  }
  </code></pre>
  
  <p>Which loads jQuery first and then my JS file. And here is what I do in this JS:</p>
  
  <pre><code>cuckoo = document.createElement("div");
  cuckoo.innerHTML = '&lt;div id="cuckoo-child" style="width:100%;height:40px;background-color:#00ff00;position:fixed;left:0;bottom:0;z-index:32000!important""&gt; \
  Two gentlemen entering bottom bar... \
  &lt;/div&gt;';
  $('body').appendChild(cuckoo);
  </code></pre>
  
  <p>The goal is to be able to keep #cuckoo-child somewhere in the internal folder (how to turn to it then, btw?) or on a server so I can have easily manageable html code instead of string in quotes even completion hints don't work with. How should I attack this?</p>
  
  <p>Thanks in advance!</p>