JavaScript 修改HTML内容

JavaScript 是动态、轻量级且最常用的计算机编程语言，用于创建网页。它与客户端交互，并使页面动态化。JavaScript可以更改HTML页面的内容。使用 getElementById()方法 获取元素的ID并更改HTML内容。

示例： 在这个示例中，我们将更改段落元素的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>
        Change HTML Content using JavaScript
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h3>
        Change HTML Content using Javascript
    </h3>
 
    <p id="GFG">
        GeeksforGeeks: A computer science portal
    </p>
 
    <button type="button" onclick=
        'document.getElementById("GFG").innerHTML
            ="Welcome to GeeksforGeeks"'>
        Click Here!
    </button>
</body>
</html>

输出：

JavaScript 修改HTML内容

JavaScript可以改变HTML页面的样式: JavaScript可以用来改变HTML页面的CSS属性。

示例: 在这个示例中，我们将改变段落元素的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport" content= "width=device-width, initial-scale=1.0">
    <title>
        Change HTML Content using JavaScript
    </title>
</head>
 
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
 
    <h3>
        Change HTML Content using Javascript
    </h3>
 
    <p id="GFG">
        GeeksforGeeks: A computer science portal
    </p>
 
    <button type="button"
        onclick="document.getElementById('GFG')
            .style.fontSize='25px'">
        Click Here!
    </button>
</body>
</html>

输出:

JavaScript 修改HTML内容