Question

es6的新增功能，有没有一种方法可以在DOM中使用模板文字''附加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运算符，由+=进行的分配也会破坏所有内容。看到这个post

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>

使用模板字符串附加HTML

2 个答案: