如何将字符串解析为 html 或者如何通过单击按钮动态添加复杂的 html？

Question

我需要在单击按钮时插入此 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>

我试过这段代码，但它 returns 给我一个 body 标签，里面有我的 html。

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

我需要在上传按钮之前动态添加前面的 html 元素（我使用了一个 before() 方法，里面有 stringToHTML 函数并且它有效）。有更简单的方法吗？因为我了解到 documen.createElement 不适用于复杂的参数。

感谢所有社区在我之前的问题中给予的帮助。

Answer 1

您可以使用模板文字创建一个 html 变量，您可以在其中编写 html 语义，然后您可以使用 insertAdjacentHTML()

Answer 2

您可以将 HTML 附加到元素的内部 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>

Answer 3

使用 template string to contain the HTML, and when you click the button use 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 或者如何通过单击按钮动态添加复杂的 html？

How can I parse a string as html or maybe how can I dynamic add a complex html by clicking a button?

html

javascript

string

dynamic

createelement