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

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

javascript html

Javascript 如何将html片段动态附加到网页中？,javascript,html,Javascript,Html,我有以下标记： <div id="maincontainer"> <div id="mainMenu"> <div class="giver"> <hr class = "giver-hr"> <select class ="giver-subject"></select> <select class ="giver-status"></select>

我有以下标记：

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



乱数假文

乱数假文

乱数假文

乱数假文

乱数假文

乱数假文

乱数假文

乱数假文

乱数假文

，其中

元素重复多次（9）

例如，通过

for（）{}

cycle动态附加这些块的最佳方法是什么？据我所知，不推荐使用

innerHtml

属性。使用似乎也不是正确的方法

我该怎么办？我想用类似Javascript

class

es行为的模板扩展我的网页。

您可以这样做：

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

const-giver=`

乱数假文
`;
for（设i=0；i<9；i++）{
document.getElementById（“主菜单”）.insertAdjacentHTML（“beforeed”，giver）；
}

您可以使用和


var wrapper=document.querySelector（“主菜单”）；
对于（让i=0；i我会使用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>

这意味着new\u giver\u元素
现在指的是一个新的、未连接的DOM节点（一个DocumentFragment
）（如果使用，可以进一步修改），可以通过appendChild
或其他方法插入到文档中。
它是合法的吗人们使用的方法还是更像概念证明？这将导致HTML解析的次数与调用insertAdjacentHTML的次数相同，因为该方法是如何提供源代码的，即使后者可能与以前的一个调用相同。@IgorCheglakov是的，这是一个“合法”方法
<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>

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