JavaScript 如何创建动态HTML页面

在本文章中，我们将了解如何使用HTML、CSS和JavaScript创建动态HTML页面。首先让我们知道什么是动态HTML页面。

动态HTML页面，顾名思义是指根据用户输入可自定义和可变的HTML页面。例如：

使用CSS，我们可以在用户点击网页上的按钮时每次更改网页的背景颜色。
使用JavaScript，我们可以要求用户输入他/她的姓名，然后在网页上动态显示它。

如果您想更多了解动态HTML页面，您可以参考这篇文章：DHTML JavaScript。

让我们来看一些例子，以了解如何使用HTML和CSS创建动态HTML页面。

示例1

输入用户名并动态更改网页的文本内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        How to create dynamic HTML pages ?
    </title>
</head>
 
<body>
    <h1>Enter Your Name</h1>
 
    <input id="name" type="text">
    <button type="button" onclick="EnterName()">Submit</button>
    <p style="color:green" id="demo"></p>
 
 
    <script>
        function EnterName() {
            let x = document.getElementById("name").value;
 
            document.getElementById("demo").innerHTML =
                "Welcome to Geeks For Geeks " + x;
        }
    </script>
</body>
</html>

输出：

JavaScript 如何创建动态HTML页面

示例2

在每次点击时动态更改网页的背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
</head>
 
<body style="text-align:center;" id="body">
    <h1>Enter Your Color Choice</h1>
 
    <button type="button" onclick="changecolor()">
        Color
    </button>
 
    <script>
        function changecolor() {
            // Generating random color each time
            let color = "#" + (Math.random() * 16777215 | 0).toString(16);
 
            $("body").css("background-color", color);
        }
    </script>
</body>
</html>

输出：

JavaScript 如何创建动态HTML页面