Как встроить элемент DOM в литералы шаблона - PullRequest
Новая
       9

Как встроить элемент DOM в литералы шаблона

0 голосов
/ 19 февраля 2019

Есть ли способ встроить элемент DOM в строку шаблона? 

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

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

Он просто вызывает функцию toString HTMLElement и отображает [object HTMLButtonElement] вместо действительной кнопки

Ответы [ 3 ]

0 голосов
/ 19 февраля 2019

Нет, сам элемент не может быть вставлен таким образом.Вы можете сериализовать его в 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 ";
}
0 голосов
/ 19 февраля 2019

Element.innerHTML

Свойство Element innerHTML получает или устанавливает разметку HTML или XML, содержащуюся в элементе.

Youнельзя использовать innerHTML для вставки DOM-узла, созданного с помощью createElement, для этого вы должны использовать такие методы, как 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>
0 голосов
/ 19 февраля 2019

Вы можете использовать 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>
...