Create an element with onClick event listener using JS

# Create an element with onClick event listener using JS

To create an element with an onClick event listener:

Use the document.createElement() method to create the element.
Use the addEventListener() method to add a click event listener to the element.
Add the element to the page using the appendChild() method.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box"></div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
// ✅ Create element
const el = document.createElement('div');

el.addEventListener('click', function handleClick(event) {
  console.log('element clicked 🎉🎉🎉', event);
});

// ✅ Add text content to the element
el.textContent = 'Hello world';

// ✅ Or set the innerHTML of the element
// el.innerHTML = `<span>Hello world</span>`;

el.style.backgroundColor = 'salmon';
el.style.width = '150px';
el.style.height = '150px';

// ✅ add element to DOM
const box = document.getElementById('box');
box.appendChild(el);

create element with onclick event

The code for this article is available on GitHub

We used the document.createElement() method to create the element.

index.js

Copied!
const el = document.createElement('div');

The only parameter we passed to the method is the type of element to be created (div in the example).

The createElement method returns the newly created element.

We called the addEventListener() method on the element, passing it the following 2 parameters:

The event type to listen for (click in the example).
A function that gets invoked when the event is triggered.

index.js

Copied!
const el = document.createElement('div');

el.addEventListener('click', function handleClick(event) {
  console.log('element clicked 🎉🎉🎉', event);
});

The code for this article is available on GitHub

Every time the element is clicked, the handleClick function is invoked.

You can use the textContent property to set the element's text content or the innerHTML property to set the element's inner HTML markup.

index.js

Copied!
// ✅ Create element
const el = document.createElement('div');

el.addEventListener('click', function handleClick(event) {
  console.log('element clicked 🎉🎉🎉', event);
});

// ✅ Add text content to the element
el.textContent = 'bobby hadz tutorial';

// ✅ Or set the innerHTML of the element
// el.innerHTML = `<span>Hello world</span>`;

The code for this article is available on GitHub

You shouldn't use the innerHTML property with user-provided data without escaping it. This would leave your application open to cross-site scripting attacks.

You can use the appendChild() method to add the element to the page.

index.js

Copied!
// ✅ Create element
const el = document.createElement('div');

el.addEventListener('click', function handleClick(event) {
  console.log('element clicked 🎉🎉🎉', event);
});

// ✅ Add text content to the element
el.textContent = 'Hello world';

// ✅ add element to DOM
const box = document.getElementById('box');
box.appendChild(el);

The code for this article is available on GitHub

The method adds a node to the end of the list of children of the element it was called on.

# Create an element with onClick event listener using onclick

You can also use the onclick attribute to add an event lister after creating the element.

index.html

Copied!
// ✅ Create element
const el = document.createElement('div');

el.onclick = function handleClick(event) {
  console.log('element clicked 🎉🎉🎉', event);
};

// ✅ Add text content to the element
el.textContent = 'bobby hadz tutorial';

// ✅ Or set the innerHTML of the element
// el.innerHTML = `<span>Hello world</span>`;

el.style.backgroundColor = 'salmon';
el.style.width = '150px';
el.style.height = '150px';

// ✅ add element to DOM
const box = document.getElementById('box');
box.appendChild(el);

The code for this article is available on GitHub

The onclick attribute specifies a function to run when the element is clicked.

Either approach works, but the addEventListener method is more commonly used.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Create an element with onClick event listener using JS