将带有 event.currenttarget 的 HTML 传递给模板文字以将其用作内部 HTML

Question

所以有一个事件监听器将它自己的 HTML 给 function 调用aww with event.currenttarget 以便用 innerHTML 再次渲染它，当我记录choose时，我用一个名为choose的常量传递它，它正确地给出 HTML但是当我在它的位置呈现页面时，这将显示： [object HTMLDivElement]所以试图在它上面使用 JSON.parse 来删除字符串但它没有用：

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>
    
    
    `
}

我们如何将e.currenttarget放入模板文字中以将其与 innerHTML 一起使用？

Answer 1

您正在尝试使用字符串插入一个类型为 object 的节点，这会烦人地为您提供[object Object]或在您的情况下为[object HTMLDivElement] 。 如果要嵌入节点的 HTML，可以使用innerHTML属性轻松访问它：

const choose = event.currentTarget.innerHTML; // <-- Will return something like "<div>hello</div>"

它将在您的字符串插值中呈现为 HTML。

编辑

如果你想要 HTML 包括它的父级，只需将innerHTML更改为outerHTML ：

const choose = event.currentTarget.outerHTML; // <-- Will return something like "<div><div id="child">blah</div>helllo<button>cool</button></div>"