Javascript for 循环只创建一个孩子答案

【问题标题】：Javascript for loop only creates one childJavascript for 循环只创建一个孩子
【发布时间】：2021-06-01 15:21:17
【问题描述】：

我有一个 js 对象数组，对于数组中的每个对象，我都在尝试创建一个带有模板的 div，用 <template></template> 指定。我正在尝试使用 for 循环来做到这一点。 for 循环完全符合我的要求，一次。

这是我要复制的 HTML 模板：

<template id="tracktemp">

  <div class="trackerItem">
    <div class="itemNameTextCont">
      <p class="itemNameText">Combatant Name</p>
    </div>
    <div class="itemHpTextCont">
      <p class="itemHpText">HP 100</p>
    </div>
    <div class="itemApTextCont">
      <p class="itemApText">AP 30</p>
    </div>
    <div class="itemActionButtonsCont">
      <div class="actionButtonCont"><button class="actionButton">Heal</button></div>
      <div class="actionButtonCont"><button class="actionButton">Dam</button></div>
      <div class="actionButtonCont"><button class="actionButton">Stat</button></div>
      <div class="actionButtonCont"><button class="actionButton">Abil</button></div>
    </div>
    <div class="itemModifyButtonsCont">
      <div class="modifyButtonCont"><button class="modifyButton">Edit</button></div>
      <div class="modifyButtonCont"><button class="modifyButton">Remove</button></div>
    </div>
  </div>

</template>

它被复制到的 HTML 部分（在 trackerCont 中）

  <section class="trackerModule">
    <div class="trackerModuleCont">
      <div class="trackerHeaderCont">
        <h2 class="trackerHeader">Combatants</h2>
      </div>
      <div class="trackerTopButtonsCont">
        <div class="topButtonCont"><button class="topButton">Add</button></div>
        <div class="topButtonCont"><button class="topButton">Add From</button></div>
      </div>
      <div id="trackerCont" class="trackerCont">

        
      </div>
      <div class="trackerBottomButtonsCont">
        <div class="bottomButtonCont"></div>
        <div class="bottomButtonCont"></div>
      </div>
    </div>
  </section>

而 JS 进行复制

var trackerArray = [
    {Name: "Joe Brown", HP: 100, AP: 30},
    {Name: "Steve Smith", HP: 100, AP: 30},
    {Name: "Jane", HP: 100, AP: 30}
]

function buildTracker() {
    var trackerLength = trackerArray.length;
    var trackItemTemp = document.getElementById('tracktemp').content.cloneNode(true);

    for (i = 0; i < trackerLength; i++) {
        var combatant = trackerArray[i];
        var itemParent = document.getElementById('trackerCont');
        trackItemTemp.querySelector('.itemNameText').innerText = combatant.Name;
        trackItemTemp.querySelector('.itemHpText').innerText = combatant.HP;
        trackItemTemp.querySelector('.itemApText').innerText = combatant.AP;
        document.createElement(trackItemTemp);
    }
        
}

我在某种程度上理解 appendChild 只能创建一个元素。我应该改用 document.createElement ，不是吗？我不明白如何重写代码以使用 createElement 复制 HTML 模板...如果有人能帮我一把，那就太好了！谢谢！

【问题讨论】：

标签： javascript html arrays json

【解决方案1】：

来自

document.createElement(trackItemTemp);

到

document.getElementById("trackerCont").appendChild(trackItemTemp);

（编辑）我错过了整个函数代码，我也错过了一个变量 itemParent 所以我编辑了函数的最后一行。确保在每个循环中使用 cloneNode。

function buildTracker() {
        var trackerLength = trackerArray.length;
        var trackItem;
        for (i = 0; i < trackerLength; i++) {
            var trackItemTemp = document.getElementById('tracktemp').content.cloneNode(true);
            var combatant = trackerArray[i];
            var itemParent = document.getElementById('trackerCont');
            trackItemTemp.querySelector('.itemNameText').innerText = combatant.Name;
            trackItemTemp.querySelector('.itemHpText').innerText = combatant.HP;
            trackItemTemp.querySelector('.itemApText').innerText = combatant.AP;
            itemParent.appendChild(trackItemTemp);
        }   
    }

【讨论】：