Question

是否可以将DOM元素嵌入模板字符串中？

const btn= document.createElement('button');
btn.addEventListener('click', handler);

someDiv.innerHTML = `
<div>${btn}</div>
`;

它仅调用HTMLElement的toString函数并呈现[object HTMLButtonElement]而不是实际按钮

Answer 1

您可以使用Element.outerHTML来获取元素作为字符串。请注意，它不会将真实的btn附加到div上，它将复制元素的html和附加的eventListener无效。

如果希望复制元素具有其功能，则可以使用cloneNode()和appendChild()将其插入父级。

let somediv = document.querySelector('#somediv');
const btn= document.createElement('button');
btn.innerHTML = 'Click me';
btn.addEventListener('click',(e) => {
  somediv.innerHTML = `<div>${btn.outerHTML}</div>`
  console.log(somediv.innerHTML);
})
document.body.appendChild(btn);

#somediv{
  position:absolute;
  top:200px;
  left:200px;
  padding:10px;
  background:blue;
}

<div id="somediv"></div>

Answer 2

否，不能以这种方式插入元素本身。您可以将其序列化为HTML，但是会丢失对元素所做的所有更新，例如事件处理程序。

相反，您可以使用HTML创建整个结构，然后选择button添加侦听器。

someDiv.innerHTML = `
<div><button>click me</button></div>
`;

someDiv.querySelector("button")
  .addEventListener('click', handler);

var pre = document.querySelector("pre");

function handler(e) {
  pre.textContent += "foo ";
}

<div id=someDiv>
</div>
<pre></pre>

Answer 3

Element.innerHTML

Element属性innerHTML获取或设置元素中包含的HTML或XML标记。

您不能使用innerHTML插入用createElement创建的DOM节点，因为您必须使用类似ParentNode.append()的方法：

const btn= document.createElement('button');
btn.textContent = 'click';
btn.addEventListener('click', handler);
someDiv.innerHTML = `
<div class="inner"></div>
`;
document.querySelector('.inner').append(btn);
function handler(){alert('clicked')}

<div id="someDiv"></div>

如何将DOM元素嵌入模板文字中

3 个答案: