Как передать значение инпута в html через innerHTML?

Question

[Evgeii]

Вот есть код где я могу создать div и записать в него значение из инпутов:

<div>
  <input type="text" id='inp'>
  <input type="text" id='inpCom'>
  <button id='btn'>Клик</button>
</div>
<div class='com' id='com'>
  
</div>

const input = document.querySelector("#inp");
const btn = document.querySelector("#btn");

function addCom() {
  const com = document.querySelector("#com");
  let box = document.createElement('div');
  box.innerHTML = 
     `<h1>{input.value}</h1>
      <img src="" alt="">
      <p>{inputCom.value}</p>`;
   com.append(box);
}

btn.addEventListener('click', () => {
  addCom();
})

Как сделать так чтобы в определенные места я мог записать нужные данные типо как в реакте вставка через {} в коде?

Answer 1

[Alex]

`<h1>${input.value}</h1>
<img src="" alt="">
<p>${inputCom.value}</p>`;

https://developer.mozilla.org/ru/docs/Web/JavaScri...