如何动态填充 HTML 页面中的值？

Question

我是 HTML 和网站开发的新手。我主要使用 HTML、CSS 构建网站（在线获取模板并尝试对其进行编辑）。有一个 HTML 页面，我想将其视为模板，我将向其传递几个 URL 参数并将其填充到 HTML 页面中。不知怎么的，我无法完成它。

我在 Eclipse 中创建了一个动态 Web 项目并添加了 Tomcat 7.0 作为服务器和 Chrome 66.0 作为浏览器。

以下是代码片段：

URL 模式： http://localhost:8080/NPW_WEB/shop-single.html?Product_Name=First_Product

Javascript:

<script> 

$(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('&');
        for (var i = 0; i < 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";

</script>

HTML:

<div class="container">
  <div class="column">
  <h1  id="Product_Name4">Single Product - <span id="Product_Name1"></span></h1>
  <h1>Single Product - <span id="Product_Name2">s</span></h1>
  <h1>Single Product - <span id="Product_Name3"></span></h1>
</div>

这个主题已经在很多线程中讨论过，我尝试了几个，它看起来很明显，但仍然不适合我。

Answer 1

您可以使用 JavaScript 和 JQuery 尝试下面的代码： 注意：这是在 html 标签中添加文本的方法，例如（span、p、div 等）。您可以通过向元素动态添加文本来向元素添加文本

// Javscript Code
var yourvar = 'amit';
document.getElementById("Product_Name1").innerHTML = "amit";
document.getElementById('Product_Name2').innerHTML = 'amit';
document.getElementById("Product_Name3").innerHTML = "amit";

// Jquery Code
$(document).ready(function() {
  $("#Product_Name6").text("amit");
  $("#Product_Name7").text("amit");
  $("#Product_Name8").text("amit");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3> With Javascript</h3>
<div class="container">
  <div class="column">
    <h1 id="Product_Name4">Single Product - <span id="Product_Name1"></span></h1>
    <h1>Single Product - <span id="Product_Name2">s</span></h1>
    <h1>Single Product - <span id="Product_Name3"></span></h1>
  </div>


  <h3> With Jquery</h3>

  <div class="container">
    <div class="column">
      <h1 id="Product_Name5">Single Product - <span id="Product_Name6"></span></h1>
      <h1>Single Product - <span id="Product_Name7">s</span></h1>
      <h1>Single Product - <span id="Product_Name8"></span></h1>
    </div>

Answer 2

您已编写代码以从方法 setURLParameter(); 中的查询字符串中读取和设置值，您需要在某处调用该方法。在下面的代码中，我调用了 $(document).ready.. 函数中的方法。

请尝试以下代码：

JavaScript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script> 

$(document).ready(function(){
   $("#Product_Name1").text("amit");
   setURLParameter();
});

function GetURLParameter(sParam) {
        var sPageURL = window.location.search.substring(1);
        alert(sPageURL);

        var url = window.location.href;
        alert(url);

        var sURLVariables = sPageURL.split('&');
        for (var i = 0; i < 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;

        var Product_Name = GetURLParameter('Product_Name2');
        document.getElementById("Product_Name2").innerHTML = Product_Name;
    }

</script>

HTML:

<div class="container">
  <div class="column">
      <h1>Single Product - <span id="Product_Name"></span></h1>
      <h1>Single Product - <span id="Product_Name2"></span></h1>
  </div>
</div>

如何动态填充 HTML 页面中的值？

How to dynamically populate values in HTML page?

javascript

html

url-parameters

dynamic-html