How could I change an HTML header through Javascript?

Ok, let's say I have this HTML code, and I want to change the header from within the js code, how would I? I've tried several other solutions from other Q&As but they don't seem to work, either I'm brain dead or stuck. I want to change the header based on a variable, so something like:

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>

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>

Share Improve this question edited Sep 5, 2022 at 15:40 TylerH 21.1k79 gold badges79 silver badges114 bronze badges asked Mar 24, 2022 at 2:49 The Code Challenger 822 silver badges8 bronze badges

What exactly are you trying to change? The text inside the h1 tag that reads 'header', the class header, or the css rule header? And what is the variable value - different text, a new class or a new class rule? – Dave Pritlove Commented Mar 24, 2022 at 2:59
I'm trying to change the text inside the h1 tag that reads "header" to a different text. – The Code Challenger Commented Mar 24, 2022 at 3:00

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

This quite simple let header = document.getElementById('header') header.innerHTML = "Hello"

Please assign a class name or ID to your header <h1 id="idhere">

To change the text inside the h1 tag (or any element) in javascript, you first make a reference to the element. As your h1 tag has no id attribute, you instead reference a collection of all h1 elements and reference the first (only) one using an array-like index [0]. You can then sets its innerText property to the variable holding the text you want to display.

Working snippet:

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>

I would assign an ID to the h1 containing the header

const customHeader1 = "custom header";
const header1 = document.getElementById('header1').textContent = customHeader1;

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

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

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

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

</html>

To do this you have to assign your header an ID as such: in you HTML

in your JavaScript header = document.getElementById('header-id'); header.innerHTML = "HERE GOES THE CHANGE YOU WANT TO MAKE ON THE HEADER"

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

How could I change an HTML header through Javascript? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)