How can I attach an event listener to an element that is added dynamically using vanilla JavaScript?

edit

You can use the JavaScript addEventListener() method to attach an event listener to an element that is added dynamically. Here's an example:

// Get the parent element
const parent = document.getElementById('parent');

// Create the new element
const child = document.createElement('div');
child.textContent = 'I am a dynamically added element!';

// Add an event listener to the new element
child.addEventListener('click', function() {
  console.log('The dynamically added element was clicked!');
});

// Add the new element to the parent
parent.appendChild(child);

In this example, we first get a reference to the parent element using document.getElementById(). Then, we create a new element using document.createElement() and add some text to it using the textContent property.

Next, we add an event listener to the new element using addEventListener(). Finally, we add the new element to the parent using the appendChild() method. Now, whenever the dynamically added element is clicked, the event listener will be triggered.