Another Paragraph explainer

Aim of the puzzle: Create a new HTML element using JavaScript.
Walk through of solution: Just as you have used JavaScript to access and change existing HTML elements, JS can also be used to create new ones.

The document.createElement() method takes an element name as a string, and returns a new element of that type. For example:

let newParagraph = document.createElement('p'); // This creates a new p element
let newHeading = document.createElement('h1'); // This create a new h1 element
let newImage = document.createElement('img'); // This creates a new img element

You can then set properties for these elements using JavaScript, for example:

let newParagraph = document.createElement('p');
newParagraph.textContent = 'I am a new paragraph'

let newImage = document.createElement('img');
newImage.src = './image.jpg'

It is important to note that document.createElement() does not add the new element to the webpage. That is done with a separate method, which you will learn in the next puzzle.

To complete this puzzle, create a new variable and set its value to document.createElement('p'). This creates a new p element and stores it in the variable.

Then, set the new element’s .textContent to a string of your choice.

Finally, use console.log() to print out the textContent of the new element.

Sample code solution:

JavaScript

let newSubHeading = document.createElement('h2');
newSubHeading.textContent = 'A new heading';
console.log(newSubHeading.textContent);


let newParagraph = document.createElement('p');
newParagraph.textContent = 'A new paragraph';
console.log(newParagraph.textContent);

Javascript Concepts: Document Object, document.createElement(), p element, h2 Heading element, .textContent, console.log()