Question

我正在尝试创建HTML并用数组中的文本填充HTML。

当我通过ID appendChild <p> {到div1Id}时，文本仅添加到第一个div（请参见下文）。我正在尝试让每个<p>获得一个div1Id。

您可以看到我的所有尝试HERE（最近的一次在顶部）。

我在做什么错？

格式不正确

预期结果

<h1>text</h1>
<div id='div1Id'>
  <p>text</p>
</div>
<h1>text from array index 0</h1>
<div id='div1Id'>
  <p>text from array index 1</p>
</div>
<h1>

当前尝试

    $(function() {
       google.script.run.withSuccessHandler(buildH1)
         .ageGroup();
     });

     $(function() {
       google.script.run.withSuccessHandler(buildDiv)
         .division();
     });

     //ATTEMPT 4
     //only works for first div1 (all array values written to one div instead of one per div).
     function buildH1(ageGroupArray) {
       var mainDiv = document.getElementById('accordion');

       ageGroupArray.forEach(function(rowData) {
         var h1 = document.createElement('h1');
         var div1 = document.createElement('div');
         var div1Id = div1.setAttribute('id', 'div1Id');

         h1.appendChild(document.createTextNode(rowData));
         mainDiv.appendChild(h1);
         mainDiv.appendChild(div1);
       });
       document.body.appendChild(mainDiv);
     }

     function buildDiv(divisionArray) {
       var mainDiv = document.getElementById('accordion');
       var getDiv1 = document.getElementById('div1Id');

       divisionArray.forEach(function(cellData) {
         var p = document.createElement('p');
         p.appendChild(document.createTextNode(cellData));
         getDiv1.appendChild(p);
       });
       document.body.appendChild(mainDiv);


       $(document).ready(function() {
         $(function() {
           $("#accordion").accordion({
             collapsible: true
           });
         })
       })
     }

Answer 1

Id属性是唯一的，不能重用于多个元素。

这样，选择器GetElementById将返回一个元素。

使用诸如GetElementsByClassName之类的其他选择器来获取具有匹配的class属性的属性集合。

此外，由于您已经在使用jQuery，因此建议您使用该库而不是内置的浏览器选择器来简化生活。

使用jQuery：

var ageGroup = ["Group 18-25", "Group 25-30"];
var division = ["Group 1 Cell Text", "Group 1 Cell Text"];

$(document).ready(function() {

    $(ageGroup).each(function(i, e) {
      $('#accordion')
       .append($("<h1>").text(e))
       .append($("<div>").addClass("div1class"));
    });
    
    $(division).each(function(i, e) {
      $($('.div1class')[i])
       .append($("<p>").text(e));
    });
    
    $("#accordion").accordion({
      collapsible: true
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div id='accordion'></div>

或使用您当前的代码。

var ageGroup = ["Group 18-25", "Group 25-30"];
var division = ["Group 1 Cell Text", "Group 1 Cell Text"];

function buildH1(ageGroupArray) {
  var mainDiv = document.getElementById('accordion');
  ageGroupArray.forEach(function(rowData) {
    var h1 = document.createElement('h1');
    var div1 = document.createElement('div');
    var div1Id = div1.setAttribute('class', 'div1class');

    h1.appendChild(document.createTextNode(rowData));
    mainDiv.appendChild(h1);
    mainDiv.appendChild(div1);
  });
  document.body.appendChild(mainDiv);
}

function buildDiv(divisionArray) {
  var mainDiv = document.getElementById('accordion');
  var getDiv1 = document.getElementsByClassName('div1class');

  $(divisionArray).each(function(i, cellData) {
    var p = document.createElement('p');
    p.appendChild(document.createTextNode(cellData));
    getDiv1[i].appendChild(p);
  });
  document.body.appendChild(mainDiv);
}

$(document).ready(function() {
  $(function() {
    buildH1(ageGroup);
    buildDiv(division);
    $("#accordion").accordion({
      collapsible: true
    });

  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div id='accordion'></div>

从数组创建DOM：<p>仅添加到First Div，而不是每个

1 个答案: