使用模板字符串附加 HTML

Question

有没有一种方法可以在 DOM 中使用模板文字附加 HTML，而不覆盖当前发布的内容？

我有一个巨大的 HTML 块，我需要将其发布到正在创建的列表中，用户可以在其中发布他们的输入。

每次提交任务时，都会覆盖当前提交的任务。我需要将它附加在下面。

这是用于演示目的的小提琴。

HTML：

<div class="main-content">
  <form class="new-items-create">
    <label>Name:</label>

    <input
      placeholder=" A Name"
      id="name"
    />

    <button class="subBtn">Submit</button>
  </form>
</div>

<span class="new-name"></span>

JavaScript：

form.addEventListener("submit", addItem);

function addItem(event) {
  event.preventDefault();

  let htmlStuff = `
         <div class="main">
        <div class="a name">
         <span>${name.value}</span>
        </div>
        <div>
        `;

  itemCreated.innerHTML = htmlStuff;
}

Answer 1

insertAdjacentHTML()

在 4 个位置添加 htmlString，请参阅演示。与

.innerHTML

不同，它永远不会重新渲染并破坏原始 HTML 和引用。

.innerHTML

唯一能做而

insertAdjacentHTML()

做不到的事情就是阅读 HTML。 注意：即使使用

.innerHTML

运算符，

+=

的赋值也总是会破坏所有内容。请参阅此帖子

const sec = document.querySelector('section');

sec.insertAdjacentHTML('beforebegin', `<div class='front-element'>Front of Element</div>`)

sec.insertAdjacentHTML('afterbegin', `<div class='before-content'>Before Content</div>`)

sec.insertAdjacentHTML('beforeend', `<div class='after-content'>After Content</div>`)

sec.insertAdjacentHTML('afterend', `<div class='behind-element'>Behind Element</div>`)

* {
  outline: 1px solid #000;
}

section {
  margin: 20px;
  font-size: 1.5rem;
  text-align: center;
}

div {
  outline-width: 3px;
  outline-style: dashed;
  height: 50px;
  font-size: 1rem;
  text-align: center;
}

.front-element {
  outline-color: gold;
}

.before-content {
  outline-color: blue;
}

.after-content {
  outline-color: green;
}

.behind-element {
  outline-color: red;
}

<section>CONTENT OF SECTION</section>

Answer 2

您可以使用

+=

来追加：

document.getElementById('div').innerHTML += 'World';

<div id="div">
  Hello
</div>

Answer 3

Element.prototype.appendTemplate = function (html) {
    this.insertAdjacentHTML('beforeend', html);
    return this.lastChild;
};

如果您按照上面的方式创建元素原型，您可以获取该元素作为参考，以便您可以继续修改它：

   for (var sectionData of data) {
        var section = target.appendTemplate(`<div><h2>${sectionData.hdr}</h2></div>`);

        for (var query of sectionData.qs) {
            section.appendTemplate(`<div>${query.q}</div>`);
        }
    }

根据您的工作量，也许使用模板引擎会更好，但这可以让您在没有重量的情况下走得很远。