如何将 html 片段动态附加到网页中？

Question

我有以下标记：<div id="maincontainer">  <div id="mainMenu">    <div class="giver">      <hr class = "giver-hr">      <select class ="giver-subject"></select>      <select class ="giver-status"></select>      <label class = giver-isClient>        <input type = "radio">        <span>lorem ipsum</span>      </label>    </div>    <div class="giver">      <hr class = "giver-hr">      <select class ="giver-subject"></select>      <select class ="giver-status"></select>      <label class = giver-isClient>        <input type = "radio">        <span>lorem ipsum</span>      </label>    </div>    <div class="giver">      <hr class = "giver-hr">      <select class ="giver-subject"></select>      <select class ="giver-status"></select>      <label class = giver-isClient>        <input type = "radio">        <span>lorem ipsum</span>      </label>    </div>    <div class="giver">      <hr class = "giver-hr">      <select class ="giver-subject"></select>      <select class ="giver-status"></select>      <label class = giver-isClient>        <input type = "radio">        <span>lorem ipsum</span>      </label>    </div>    <div class="giver">      <hr class = "giver-hr">      <select class ="giver-subject"></select>      <select class ="giver-status"></select>      <label class = giver-isClient>        <input type = "radio">        <span>lorem ipsum</span>      </label>    </div>    <div class="giver">      <hr class = "giver-hr">      <select class ="giver-subject"></select>      <select class ="giver-status"></select>      <label class = giver-isClient>        <input type = "radio">        <span>lorem ipsum</span>      </label>    </div>，其中<div class="giver">元素重复多次 (9) 次。例如，通过for(){}循环动态附加此类块的最佳方法是什么？据innerHtml我所知，不推荐该物业。并且使用我制作的特殊递归函数似乎也不是正确的方法。我应该怎么办？我想用模板来扩展我的网页，有点像 Javascript classes 的行为方式。

Answer 1

你可以这样做：

const giver = `

  <div class="giver">

     <hr class = "giver-hr">

     <select class ="giver-subject"></select>

     <select class ="giver-status"></select>

     <label class = giver-isClient>

       <input type = "radio">

       <span>lorem ipsum</span>

     </label>

  </div>

`;

for (let i = 0; i < 9; i++) {

  document.getElementById("mainMenu").insertAdjacentHTML("beforeend", giver);

}

Answer 2

您可以使用createElement和appendChild

https://stackblitz.com/edit/typescript-sfzdfp

<div id="maincontainer">

    <div id="legalDocument">

    </div>

</div>

var wrapper = document.querySelector("#mainMenu");

for(let i=0; i<9; i++) {

    wrapper.appendChild(createBox());

}

function createBox() {

  const giver  = document.createElement("div");

  giver.className = 'giver'

  const givenHr  = document.createElement("hr");

  givenHr.className = 'giver-hr'

  const giverSubject  = document.createElement("select");

  giverSubject.className = 'giver-subject'

  const giverStatus  = document.createElement("select");

  giverStatus.className = 'giver-status'

  const giverIsClient  = document.createElement("label");

  giverStatus.className = 'giver-isClient'

  const input  = document.createElement("input");

  input.type = 'radio'

  const span  = document.createElement("span");

  const text = document.createTextNode('lorem ipsum');

  span.appendChild(text);

  giverIsClient.appendChild(input);

  giverIsClient.appendChild(span);

  giver.appendChild(givenHr);

  giver.appendChild(giverSubject);

  giver.appendChild(giverStatus);

  giver.appendChild(giverIsClient);

  return giver;

}