使用模板字符串附加 HTML

Question

es6 的新手，有没有办法在 DOM 中使用模板文字 `` 附加 HTML 而不会覆盖当前发布的内容？

我有一大块 HTML 需要为正在创建的列表发布。用户可以在哪里发布他们的输入。

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

小提琴用于演示目的。

https://jsfiddle.net/uw1o5hyr/5/

 <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>