One approach is to use the insertAdjacentHTML method instead of innerHTML. This method allows you to insert new HTML at a specific position relative to the existing element, without overwriting the entire contents of the element. For example, to append new HTML to the end of an element without destroying event listeners, you could use the following code:
Another approach is to use the DOM API to create new elements and append them directly to the existing element, rather than modifying the innerHTML property. This can be more verbose, but it ensures that any existing event listeners are preserved. For example:
const newElement = document.createElement('div');
newElement.textContent = 'New content';
In both cases, it's important to be careful when modifying existing HTML elements to avoid accidentally overwriting event listeners. By using the appropriate methods and APIs, you can append new HTML to an existing element without destroying any existing event listeners.