如何将 HTML header 更改为 Javascript？

Question

好的，假设我有这个 HTML 代码，我想从 js 代码中更改 header，我该怎么做？我已经尝试了其他问答中的其他几种解决方案，但它们似乎不起作用，要么我脑死了，要么卡住了。我想根据变量更改 header，例如：

header = variablexyz;

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .header {
            padding: 60px;
            text-align: center;
            background: #1746c7;
            color: white;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div class="header">
        <h1>header</h1>
        <p>-randomly generated username-</p>
    </div>
    <script src="script.js"></script>
</body>

</html>

Answer 1

这个很简单let header = document.getElementById('header') header.innerHTML = "Hello"

请为您的 header <h1 id="idhere">

指定一个 class 名称或 ID

Answer 2

要更改 javascript 中 h1 标记（或任何元素）内的文本，您首先要引用该元素。由于您的 h1 标签没有 id 属性，您改为引用所有 h1 元素的 collection 并使用 array-like 索引引用第一个（唯一）元素[0].然后，您可以将其 innerText 属性设置为包含要显示的文本的变量。

工作片段：

let header = "some different Text";

const h1elements = document.getElementsByTagName('h1');

h1elements[0].innerText = header;

<div class="header">
        <h1>header</h1>
        <p>-randomly generated username-</p>
    </div>

Answer 3

为此，您必须为 header 分配一个 ID 因此：在你里面 HTML

在你的 JavaScript header = document.getElementById('header-id'); header.innerHTML = "这里是您要在 HEADER 上进行的更改"

如何将 HTML header 更改为 Javascript？

How could I change an HTML header through Javascript?

html

javascript

html-heading