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

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附加到它的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

元素属性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>