'passing HTML with event.currenttarget to a template literal to use it as inner HTML

so there is an event listener that going to give its own HTML to the function called aww with event.currenttarget in order to render it again with innerHTML, I pass it with a const called choose when I log the choose, its give the HTML correctly but when I render the page in its place this will show up : [object HTMLDivElement] so tried to use JSON.parse on it to remove string but it didn't work :

document.querySelector(".h1").addEventListener("click",aaw)
document.querySelector(".h2").addEventListener("click",aaw)
document.querySelector(".h3").addEventListener("click",aaw)
function aaw(event) {
    const choose = event.currentTarget
    document.body.innerHTML =
        `
    <div class="container">
    ${ choose}
    <div class="monster">
        <div class="monster-up">
            <h2>mordkaiser</h2>
            <div class="outside-bar">
                <div class="inside-bar">

                </div>
            </div>
            

        </div>
        <div class="monster-down">
            <div class="dicerools">

            </div>
            
        </div>
        
    </div>

    <button>attack</button>
</div>
    
    
    `
}

How can we put that e.currenttarget into the template literal to use it with innerHTML?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source