According to MDN web docs, events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if you want to.
It can occur in different ways. For example: when a user clicks on the submit button to submit a form while a user plays or pauses a video, when a user presses a particular key on the keyboard, or when a user copies content from a web page.
In the above example, the
btn class does not exist in our
index.html page. Therefore, this will throw an error of
addEventListener of null.
This method allows us to create the HTML elements by their tag names, like
When we create an element with
In this article, we are going to create a simple dog profile.
We’ll dynamically create our elements, inject it to the DOM, and also attach event handlers.
Here is our
In our index.js, we used
document.createElement() to dynamically create a new
div. Then, we added a dog class to the
div we created earlier.
classList property is used to add, remove, and toggle CSS classes on an element.
Next, we created an image tag with
We also created the
h2 tag and added text content in it. Additionally, we added a new
p element with a class of
info that will contain more information about the dog.
Next, we’ll dynamically creating a button with a class of
btn. We’ll add text saying
click here to read more.
If you inspect your browser, you won’t see the
div with a class of
dog we created because we haven’t appended it yet to the DOM.
Now, we’ve dynamically created an element. The question is: how do we inject it to the page?
To inject it into the DOM, we are going to use the
.appendChild() method to append the dynamically created elements.
If you inspect your console, you will see the dynamically created elements injected in your DOM.
Now we can add event handlers.
To attach event handlers to the dynamically created button, we need to select the button with a class of
btn and add an event listener of
We’re saying that
onclick of the button, the
p tag with a class of
moreInfo should display
Here is the CSS code for styling the dog profile.
According to MDN, template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.
Check out this live demo at codepen
In the template
literals.js file, we declared
newDog, and use template literals to create multiple elements in it. If you
console.log(newDog), you will see the element created like a string in the console.
Or if you
console.log(typeof newDog), it is going to return a string showing that it is not yet a DOM element.
Next, we are going to use
document.createRange() to turn the string into a DOM element.
Then we call
createContextualFragment()) method that leaves on the range. When you
console.log myFragment, you will see a range of objects ( a collection of elements, or part of HTML we can work with).
Then, we append
myFragment to the body of the page.
NOTE: If you do need to do things like add event listeners or change classes, we should first put it in the DOM with a
createcontextual fragment and put it in the body or anywhere in the page.
Next, we are selecting the button with a class of
.btn where the users click to read more about the dog.
console.log(btn), you find out that it is in the DOM because we have injected it to the DOM through the
Adding event handlers
We added an event listener of
click, and called a
showMore function, we selected the class
moreInfo. If you check on our
css you find out that the text was set to display none. So now we are saying that
onclick of the button, let the display
none change to display
We have created a dog profile. All elements were created dynamically, and the event handler of
onclick was added to the dynamically created elements.
document.createElement, and also use the template literals.
You have also learnt how to attach event handlers to the dynamically created element.
Debugging code is always a tedious task. But the more you understand your errors the easier it is to fix them.