javascript - 将 HTML 元素推送到一个数组中，稍后将它们追加到一个 div 中，该 div 也是动态创建的

Question

我有一些动态创建的元素。我想将这些元素推送到一个数组中，以便能够对所有元素进行 for 循环并为每个元素分配一个属性。

问题是，如果我像这样声明一个数组 var Array = [];我无法将 HTML 元素推送给它。控制台日志说:

Cannot read property 'push' of undefined

如果我这样声明数组 var Array;那么我就不能向它推送元素。

这就是我想要的。

var listgroupdiv  = document.createElement("div");
    var listgroupdiv1 = document.createElement("div");
    var listgroupdiv2 = document.createElement("div");


    var ListGroupClass = document.createAttribute("class");
    ListGroupClass.value = "row";
    listgroupdiv.setAttributeNode(ListGroupClass);
    var ListGroupClass1 = document.createAttribute("class");
    ListGroupClass1.value = "col-4";
    listgroupdiv1.setAttributeNode(ListGroupClass1);
    var ListGroupClass2 = document.createAttribute("class");
    ListGroupClass2.value = "list-group";
    listgroupdiv2.setAttributeNode(ListGroupClass2);
    var ListGroupID = document.createAttribute("id");
    var ListGroupRole = document.createAttribute("role");
    ListGroupID.value = "list-tab";
    ListGroupRole.value = "tablist";
    listgroupdiv2.setAttributeNode(ListGroupID);
    listgroupdiv2.setAttributeNode(ListGroupRole);

    var id_href = 0;
    var Array_A_Group = [];
    for(var b = 0; b < CommentArray.length; b++){
      if(CommentArray[b].indexOf("Parts:") > -1){
        var listgroupa        = document.createElement("a");
        var listgroupaClass   = document.createAttribute("class");
        var listgroupaID      = document.createAttribute("id");
        var listgroupaToggle  = document.createAttribute("data-toggle");
        var listgroupaHref    = document.createAttribute("href");
        var listgroupaRole    = document.createAttribute("role");
        var listgroupaAria    = document.createAttribute("aria-controls");

        listgroupaClass.value   = "list-group-item list-group-item-action";
        listgroupaID.value      = String(id_href);
        listgroupaToggle.value  = "list";
        listgroupaHref.value    = String(id_href);
        listgroupaRole.value    = "tab";
        listgroupaAria.value    = "home";
        listgroupa.setAttributeNode(listgroupaClass);
        listgroupa.setAttributeNode(listgroupaID);
        listgroupa.setAttributeNode(listgroupaToggle);
        listgroupa.setAttributeNode(listgroupaHref);
        listgroupa.setAttributeNode(listgroupaRole);
        listgroupa.setAttributeNode(listgroupaAria);

        var CommentText = document.createTextNode(CommentArray[b]);
        listgroupa.appendChild(CommentText);
        Array_A_Group[id_href].push(listgroupa); // <<-- Problem is in this line!
        
        id_href++;
      }
    }

我的目标是创建一个像这样的 div:

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>

  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

有唯一的ID和唯一的hrefs，然后给每个<a>添加一个TextNode .

Answer 1

问题确实是这一行:

Array_A_Group[id_href].push(listgroupa);

数组对象的 push 方法在数组本身上调用。

例如

Array_A_Group.push(listgroupa);

按照您的方式，它会尝试将对象推送到 Array_A_Group 内的数组在索引 id_href 处。由于此元素不存在，您会正确得到错误 Cannot read property 'push' of undefined

此外，您不需要保留额外的变量来跟踪数组的索引。将内容推送到数组后，它的索引会自动递增。