来自数组的动态 HTML 行答案

【问题标题】：Dynamic HTML Rows from Array来自数组的动态 HTML 行
【发布时间】：2020-08-19 18:54:01
【问题描述】：

如果有这样的数组

companies = [COMPANY_1, COMPANY_2]

我有一个名为“公司”的 div 类的 HTML 文件。如何在 HTML 文件中构建行，使其显示与此相同（但动态）？

<div class="companies">
       <div class="row">
          <div id='company_1'>
           COMPANY_1
          </div>
        </div> 
        <div class="row">
          <div id='company_2'>
            COMPANY_2
          </div>
        </div>
     </div>

这是在 Google Apps 脚本中，并且该数组将始终在变化。 HTML 用于 Google Apps 脚本中的边栏。

【问题讨论】：

请按照How to Ask 中的建议添加您的搜索/研究工作的简要说明。

标签： javascript html google-apps-script web-applications

【解决方案1】：

您可以使用类似的 javascript 创建元素

function CreateElementFromArray() {
   var companies = [COMPANY_1, COMPANY_2];
   var companyElement = document.getElementsByClassName('companies')[0];
   for (var i=0; i < companies.length; i++) {
     var nwtag = createElementHtml(companies[i], 'div', companies[i]);
     companyElement.appendChild(nwtag);
   }
}

    function createElementHtml(id,tagname, text) {
      var containerdiv = document.createElement('div');
      containerdiv.className = 'row';

      var nwtag = document.createElement(tagname);
      nwtag.id = id;
      containerdiv.innerText = text;
      containerdiv.appendChild(nwtag);
      return containerdiv;
    }

【讨论】：

【解决方案2】：

这可以通过使用innerhtml来实现

var companies = ["COMPANY_1", "COMPANY_2"]

companies.forEach(company => {

document.getElementById("companies").innerHTML = document.getElementById("companies").innerHTML + `<div class="row">${company}<div>`
})

【讨论】：