title: How to dynamically populate values in HTML page?
body: <p>I am new to HTML and website development. I am building a website using HTML, CSS mainly (got a template online and trying to edit it). There is a HTML page which I want to treat like a template and I will pass few URL parameters to it and populate the same into the HTML page. Somehow I am not able to get it done.</p>
  
  <p>I have created an dynamic web project in Eclipse and added Tomcat 7.0 as a server and Chrome 66.0 as a browser.</p>
  
  <p>Following is the code snippet:</p>
  
  <p>URL Pattern:
  <a href="http://localhost:8080/NPW_WEB/shop-single.html?Product_Name=First_Product" rel="nofollow noreferrer">http://localhost:8080/NPW_WEB/shop-single.html?Product_Name=First_Product</a></p>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script&gt; 
  
  $(document).ready(function(){
     $("#Product_Name1").text("amit");
  });
  
  function GetURLParameter(sParam)
      {
          var sPageURL = window.location.search.substring(1);
          alert(sPageURL);
  
          var url = window.location.href;
          alert(url);
  
          var sURLVariables = sPageURL.split('&amp;');
          for (var i = 0; i &lt; sURLVariables.length; i++) 
          {
              var sParameterName = sURLVariables[i].split('=');
              if (sParameterName[0] == sParam) 
              {
                  return sParameterName[1];
              }
          }
      }​
  
      function setURLParameter()
      {
          var Product_Name = GetURLParameter('Product_Name');
          document.getElementById("Product_Name").innerHTML = Product_Name;
      }
  
  window.onload = function() 
  {
     document.getElementById("Product_Name1").innerHTML = "amit";
     document.getElementById("Product_Name4").textContent = "amit";
     $("#Product_Name1").text("amit");
  }
  
  var yourvar='amit';
  document.getElementById("Product_Name1").innerHTML = "amit";
  document.getElementById('Product_Name2').value = 'amit';
  document.getElementById("Product_Name3").textContent="amit";
  
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="column"&gt;
    &lt;h1  id="Product_Name4"&gt;Single Product - &lt;span id="Product_Name1"&gt;&lt;/span&gt;&lt;/h1&gt;
    &lt;h1&gt;Single Product - &lt;span id="Product_Name2"&gt;s&lt;/span&gt;&lt;/h1&gt;
    &lt;h1&gt;Single Product - &lt;span id="Product_Name3"&gt;&lt;/span&gt;&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This topic is discussed in many threads already, I tried few of them, it looks very obvious, but still not working for me.</p>