如何将 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 = `&nbsp; <div class="giver">&nbsp; &nbsp; &nbsp;<hr class = "giver-hr">&nbsp; &nbsp; &nbsp;<select class ="giver-subject"></select>&nbsp; &nbsp; &nbsp;<select class ="giver-status"></select>&nbsp; &nbsp; &nbsp;<label class = giver-isClient>&nbsp; &nbsp; &nbsp; &nbsp;<input type = "radio">&nbsp; &nbsp; &nbsp; &nbsp;<span>lorem ipsum</span>&nbsp; &nbsp; &nbsp;</label>&nbsp; </div>`;for (let i = 0; i < 9; i++) {&nbsp; document.getElementById("mainMenu").insertAdjacentHTML("beforeend", giver);}

Answer 2

您可以使用createElement和appendChildhttps://stackblitz.com/edit/typescript-sfzdfp<div id="maincontainer">&nbsp; &nbsp; <div id="legalDocument">&nbsp; &nbsp; </div></div>var wrapper = document.querySelector("#mainMenu");for(let i=0; i<9; i++) {&nbsp; &nbsp; wrapper.appendChild(createBox());}function createBox() {&nbsp; const giver&nbsp; = document.createElement("div");&nbsp; giver.className = 'giver'&nbsp; const givenHr&nbsp; = document.createElement("hr");&nbsp; givenHr.className = 'giver-hr'&nbsp; const giverSubject&nbsp; = document.createElement("select");&nbsp; giverSubject.className = 'giver-subject'&nbsp; const giverStatus&nbsp; = document.createElement("select");&nbsp; giverStatus.className = 'giver-status'&nbsp; const giverIsClient&nbsp; = document.createElement("label");&nbsp; giverStatus.className = 'giver-isClient'&nbsp; const input&nbsp; = document.createElement("input");&nbsp; input.type = 'radio'&nbsp; const span&nbsp; = document.createElement("span");&nbsp; const text = document.createTextNode('lorem ipsum');&nbsp; span.appendChild(text);&nbsp; giverIsClient.appendChild(input);&nbsp; giverIsClient.appendChild(span);&nbsp; giver.appendChild(givenHr);&nbsp; giver.appendChild(giverSubject);&nbsp; giver.appendChild(giverStatus);&nbsp; giver.appendChild(giverIsClient);&nbsp; return giver;}