title: Using JavaScript to load external HTML
body: <p>I want to keep the code short and clean. So I'm importing tons of HTML files.</p>
  
  <p>I have this in head:</p>
  
  <pre><code>&lt;script&gt; 
  var loadHtml(file) {
      $("#LoadHTML").load("html/file.html"); 
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And this in body:</p>
  
  <pre><code>&lt;div id="LoadHTML"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The problem is I have to duplicate the script for each <code>&lt;div&gt;</code> I have.<br>
  Is there a way I can make a placeholder in the script and do what I have visualized?</p>
  
  <pre><code>&lt;!-- Head --&gt;
  &lt;script&gt; 
  $(function(){
  $("#LoadHTML").load("html/{data}.html"); 
  });
  &lt;/script&gt;
  
  &lt;!-- Body --&gt;
  &lt;div id="LoadHTML" data="file"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>How do I do it so I only have to use the script once?</p>