如何動態地將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">
      <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>
  <div id="legalDocument"></div>
</div>

，其中<div class="giver">元素重復了<div class="giver"> 。

例如，通過for(){}周期動態地添加此類塊的最佳方法是什么？ 根據我所聽到的內容，不建議使用innerHtml屬性。 並且使用我制作的特殊遞歸函數也不是正確的方法。

我該怎么辦？ 我想用模板擴展Web頁面，就像Javascript class行為一樣。

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

我將使用HTML 模板 -這就是它們的用途：

<html>
    <head>
        <template id="giver-template">
            <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>
        </template>
    </head>
    <body>
        <!-- document body -->
    </body>
</html>

可以通過訪問模板元素本身的content屬性來獲得模板的content （已給我一個ID） DocumentFragment 。 這些內容（作為DocumentFragment ）以一種方便的形式進行了解析和准備，並且不會因需要解析標記並產生要插入到文檔中的DOM對象而導致innerHtml或insertAdjacentHTML所暗示的額外開銷。

如您所見， template元素包含在文檔head部分中，這意味着它們本身不是呈現的，或者不是文檔主體的一部分-它們的作用在於能夠克隆它們並使用它們的“實例化”副本。

您可以為用例簡單地使用上面定義的模板：

const new_giver_element = document.getElementById("giver-template").content.cloneNode(true);

這new_giver_element現在引用一個新的，未附加的DOM節點（ DocumentFragment ）（如果需要，可以進一步修改），可以通過appendChild或其他方法插入文檔中。

Answer 3

您可以使用createElement和appendChild

見演示-Stackblitz

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

如何動態地將html代碼段附加到網頁中？

問題描述

3 個解決方案

解決方案1
3 2019-05-26 09:51:29

解決方案2
2 2019-05-26 12:10:00

解決方案3
1 2019-05-26 11:16:50

如何動態地將html代碼段附加到網頁中？

問題描述

3 個解決方案

解決方案1 3 2019-05-26 09:51:29

解決方案2 2 2019-05-26 12:10:00

解決方案3 1 2019-05-26 11:16:50

解決方案1
3 2019-05-26 09:51:29

解決方案2
2 2019-05-26 12:10:00

解決方案3
1 2019-05-26 11:16:50