Just a Title explainer

The aim of this puzzle: Use JS to add a title to a webpage using an h1 element.

Walkthrough of the solution: In the JS tab, create a variable named title. This will be used to store the new h1 element. To create an h1 element, you use the document.createElement() method. The argument of the method is a string which will be the tag of your new element. For this puzzle, we want to use let title = document.createElement('h1').

Next, we need to give the element some text, otherwise it’s just blank. To set the text of the element we assign a string to its .textContent. The element is stored in the title variable, so we can use title.textContent = 'Adoptable Animals'.

Now, the h1 element is ready and stored in the title variable, but it still needs to be added to the page. To do that, you append the element to the body using body.appendChild(title). Remember that we are storing document.body in the variable named body, so this is the same as document.body.appendChild(title).

JavaScript Concepts: .textContent, .createElement(), document, body, .appendChild()

HTML Concepts: h1

1 Like

whats going on here??

let title = document.createElement('h1'); { 
    title.textContent ='Adoptable Animals';
1 Like

Hey there,

The first line creates a new h1 element and creates a variable called title to store it.

Because this is just a variable declaration, and not a function or for loop or anything, you can remove the brackets {} that surround the next 2 lines. They aren’t necessary, and may be preventing the code from working properly.

The next line, title.textContent = 'Adoptable Animals', adds text to the h1 element.

The last line adds the element to the webpage.

Hope this helps! Just remove the {} brackets and you’re good to go.


1 Like

let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;

1 Like

:smiley: :star_struck: :star_struck:

1 Like

a sample code please :pray:

Thank you :grin: I have finished

If you copy and paste the code that is not code-formatted, then your code will get messed up.

This is code-formatted:

let isCodeFormatted = true;

This is not code-formatted:
let isCodeFormatted = false;

Try putting 3 backticks (```) above and below the code.

Here’s a link that teaches everyone on formatting a code.

P :slightly_smiling_face:

let title = document.createElement(‘h1’);

title.textContent = ‘Adoptable Animals.’;