如何附加整个 HTML 集合答案

【问题标题】：How to append a whole HTML collection如何附加整个 HTML 集合
【发布时间】：2019-06-11 04:20:15
【问题描述】：

如何根据 for 循环长度在特定时间内添加要添加的 HTML 集合？

这是我的 JS 代码

            function createDiv() {


                    const numberLine = [1, 2, 3, 4];

                    for (i = 0; i < numberLine.length; i++) {
                        const numberTextContent = document.getElementById('numberTextContent');

                        numberTextContent.textContent = numberLine[i];


                        const jobPostCollection = ' <div class="jobContainer col-md-6"> \
                        <div class="jobName"> \
                        <h1 class="text-center" id="numberTextContent"></h1> \
                        </div> \
                        </div> \
                        </div>';

                        const jobPosting = document.getElementById('jobPosting');

                        jobPosting.appendChild(jobPostCollection);




                    }




            }

我试图让它在jobContainer 的 HTML 集合中显示与numberLine 长度相关的次数。

这是我的 HTML 代码

   <div class="container">
  <div class="row">
    <div id="jobPosting">
    </div>
  </div>
  <button id="button">BUTTON</button>
</div>

【问题讨论】：

jobPostCollection 不是HTML collection，它只是一个字符串。您可以将它连接 n 次并将其插入一次作为 innerHTML。
我如何能够将它连接 n 次并将其附加到我想要的次数？

标签： javascript html arrays function append

【解决方案1】：

我不确定你想要什么，但也许你可以试试这个方法让它更容易。

HTML：

<div class="container">
  <div class="row">
    <div id="jobPosting">
    </div>
  </div>
  <button id="button" onclick="createDiv();">BUTTON</button>
</div>
<script>

JS：

function createDiv() {

    h1 = document.createElement('h1');
    h1.innerHTML = "111"  // if you don't need, just remove
    h1.setAttribute("id",'1111');  //set id, also can change to class

    var jobPosting  = document.getElementById('jobPosting');
    jobPosting.appendChild(h1);

}

【讨论】：