Блог

Мне нужно вставить это html-дерево, когда я нажимаю кнопку

 <div class='img-wrapper'> <img id='immagine_preview' width='200px' height='200px' data-id_immagine='1'><button type='button' class='rimuoviImg' ><span class='fa fa-times'></span></button></div>
 

Я попробовал этот код, но он возвращает мне тег тела с моим html внутри.

      var stringToHTML = function (str) {
             
             var parser = new DOMParser();
             var doc = parser.parseFromString(str, 'text/html');
             return doc.body;
             };
 

Мне нужно динамически добавлять предыдущие html-элементы перед кнопкой загрузки (я использую метод before() с функцией stringToHTML внутри, и он работает). Есть более простой способ сделать это?. Потому что я узнал, что documen.createЭлемент не работает со сложным аргументом.

Спасибо всему сообществу за помощь, которую они оказали мне даже с моими предыдущими вопросами.

Вы можете создать переменную html с литералом шаблона и внутри нее написать свою семантику html, а затем использовать insertAdjacentHTML()

Используйте строку шаблона, содержащую HTML, и при нажатии кнопки используйте insertAdjacentHTML ее для добавления в существующий элемент.

 const str = `
  <div class="img-wrapper">
    <img id="immagine_preview" width="200px" height="200px" data-id_immagine="1">
    <button type="button" class="rimuoviImg">
      <span class="fa fa-times"></span>
    </button>
  </div>
`
// Cache the element you want to markup to appear,
// and the button
const div = document.querySelector('div');
const button = document.querySelector('button');

// Add a click listener to the button, and insert
// the markup to the chosen element.
button.addEventListener('click', () => {
  div.insertAdjacentHTML('beforeend', str);
}); 

 <button>Click</button>
<div /> 

Вы можете просто добавить HTML-код во внутренний текст элемента:

 document.querySelector('button').addEventListener('click', function() {
  document.body.innerHTML  = `<div class='img-wrapper'> <img id='immagine_preview' width='200px' height='200px' data-id_immagine='1'><button type='button' class='rimuoviImg' ><span class='fa fa-times'></span></button></div>`;
}) 

 <button>Insert HTML</button>