title: Load/Run JavaScript on demand, under localhost (no web server) and server environment
body: <p>A html page contains multiple <code>divs</code>. These divs have one button in it and some sample text. </p>
  
  <p>The content of div are <code>formatted</code> (simple bold, color, size etc) via script.</p>
  
  <p><strong>Issue:</strong> 
  The content of div should get formatted only when user clicks button, and since div content is editable, formatting should get applied to updated text/content, after click. </p>
  
  <p><strong>Tried:</strong>
  Adding and removing script tag via JavaScript.</p>
  
  <p>Basic template I have now:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="path_to_library.js" async&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div&gt;
  &lt;input type="button" value="click" onclick="format_call()"&gt;
  &lt;div id="page1" contentEditable='true'&gt;
  Bold Text. Italic text. Color Text.
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div&gt;
  &lt;input type="button" value="click" onclick="format_call()"&gt;
  &lt;div id="page2" contentEditable='true'&gt;
  Bold Text. Italic text. Color Text.
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;script&gt;
  function format_call() {
      var tag = document.createElement("script");
      tag.type = "text/javascript";
      tag.src = "path_to_library.js";
      //document.getElementsByTagName("head")[0].appendChild(tag);
      document.head.appendChild(tag).parentNode.removeChild(tag);
      }
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Note:</strong>
  No JQuery based solutions.</p>