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()

2 Likes

can you make these puzzles more complex so and hard so one can learn much more and can grab the concepts of js??

2 Likes

Agreed. I think it should be more difficult.

1 Like

First time coding here, and I think this isn’t meant for advanced concepts. I think this is great for begginers.

3 Likes

i think that this course is more focused on beginners than more advanced people. Im sure that there is courses for more advanced people.

I am confused on how to complete the code properly. I have done what it has asked me to do but I am still unable to get the code to work.

1 Like

I did it this way and went right!