How can I add event listener to this svg hardcoded in JS?

Question

I have this SVG icon hardcoded in strings in JavaScript but I cant add a listener to it.

let zoom_in_icon = '<div>';
zoom_in_icon = zoom_in_icon +'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/>';
zoom_in_icon = zoom_in_icon + '<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2z" fill="white"/>';
zoom_in_icon = zoom_in_icon + '</svg>';
zoom_in_icon = zoom_in_icon + '</div>';

when I tried like this it fails:

Uncaught TypeError: zoom_in_icon.addEventListener is not a function

zoom_in_icon.addEventListener('mouseover', function (evt) {
    zoom_in_icon.style.cursor = 'pointer';
});
zoom_in_icon.addEventListener('mouseout', function (evt) {
    zoom_in_icon.style.cursor = 'auto';
});

is it even possible to do it this way or do I have to create this SVG using plain Javascript using DOM?

UPDATE: Now I am trying to create a Div using plain Javascript so I can refer to the DOM directly instead of a string which could be the reason why it fails.

var newElement = document.createElement('div');
let zoom_in_icon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/>';
zoom_in_icon = zoom_in_icon + '<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2z" fill="white"/>';
zoom_in_icon = zoom_in_icon + '</svg>';
newElement.innerHTML = zoom_in_icon;

newElement.addEventListener('mouseover', function (evt) {
    newElement.style.cursor = 'pointer';        
});
newElement.addEventListener('mouseout', function (evt) {
    newElement.style.cursor = 'auto';
});

This still doesn't work! Now it doesn't fail, however, there is no listener added to div. When I hover it doesn't change the cursor.

Answer 1

Do you add somewhere your div on your body or anywhere else ?

document.body.appendChild(newElement);

And you can change your div declaration by : let zoom_in_icon = '<div id="zoom_in_icon ">';

To put custom css easier on #zoom_in_icon.

Answer 2

Im using sprite svg on my extension chrome projet, so i used a class Sprite :

class Sprite {
    /**
     * 
     * @param {string} url URL of file sprite.svg
     */
    constructor(url) {
        this.url = url;
        this.create();
    }
    
    /**
     * Load a file sprite SVG and add his DOM in your body at hidden
     * to be able to use icones of your sprite
     */
    create() {
        $.get(chrome.runtime.getURL(this.url), (data) => {
            var div = document.createElement('div');
            div.style.display = 'none';
            div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);
            document.body.insertBefore(div, document.body.childNodes[0]);
        });
    }

    /**
     * Create a SVG element
     * @param {string} id Id of your icon
     * @param {number} width Width display
     * @param {number} height Height display
     * @returns {SVGSVGElement} SVG Element 
     */
    createSVG(id, width, height) {
        let svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        let useElem = document.createElementNS('http://www.w3.org/2000/svg', 'use');
        svgElem.setAttribute('width', width.toString());
        svgElem.setAttribute('height', height.toString());
        useElem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', id);
        svgElem.appendChild(useElem);
        return svgElem;
    }
}

To use it, im doing it :

let spriteButton = new Sprite('assets/images/sprites/buttons.svg');
let bt_prev = spriteButtons.createSVG('#ss_previous', 25, 25);
let bt_play = spriteButtons.createSVG('#ss_play', 25, 25);

For the hover css, im using this :

// Default style
$('#zoom_in_icon').css(styleButton);

// Hover in & out style
$('#zoom_in_icon').hover(
  (e) => {
    $(e.currentTarget).css(styleButtonHover);
  },
  (e) => {
     $(e.currentTarget).css(styleButton);
   },
);

Here your sprite svg :

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol viewBox="0 0 24 24" id="your_icon_id">
        <path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2z"/>
    </symbol>
</svg>

And in your css, you could change the color to white with :

#your_icon_id {
  color: white;
}

Hope it could help you :)