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';
document.body.appendChild(title);
}
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.
-Ben
1 Like
let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals’;
document.body.appendChild(title);
1 Like
Thank you
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.
Thanks!
P 
let title = document.createElement(‘h1’);
title.textContent = ‘Adoptable Animals.’;
console.log(title.textContent);
document.body.appendChild(title);