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

Question

Is there any way to embed DOM element inside a template string?

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

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

It just calls HTMLElement's toString function and renders [object HTMLButtonElement] instead of actual button

Answer 1

You can use Element.outerHTML to get element as string. Note it will not append the real btn to div it will copy the element's html and eventListener attached to it will not work.

If you want the copy elements with its function you can use cloneNode() and appendChild() to insert it to parent.

 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

No, the element itself can not be inserted that way. You could serialize it to HTML, but you'll lose any updates you made to the element, such as the event handler.

Instead you could create the entire structure using HTML, then select the button to add the listener.

 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

The Element property innerHTML gets or sets the HTML or XML markup contained within the element.

You can not use innerHTML to insert DOM node created with createElement , for that you have to use methods like 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>