将数组中的项目附加到 html 元素 - JavaScript答案

【问题标题】：Append items from array to html element - JavaScript将数组中的项目附加到 html 元素 - JavaScript
【发布时间】：2016-08-11 09:17:33
【问题描述】：

如何像这样将数组项附加到 html 元素：

[1,2,3]

<div class="bi bj">
   <div class="bi bj">
      <strong>Suggestions</strong>
      <div><label class="bo bp"><input type="checkbox" name="addees[0]" value="0">Default</label></div>
     </div>
 </div>

所以它会是这样的：

 <div class="bi bj">
   <div class="bi bj">
      <strong>Suggestions</strong>
      <div><label class="bo bp"><input type="checkbox" name="addees[0]" value="0">Default</label></div>
      <div><label class="bo bp"><input type="checkbox" name="addees[1]" value="1">Test 1</label></div>
      <div><label class="bo bp"><input type="checkbox" name="addees[2]" value="2">Test 2</label></div>
      <div><label class="bo bp"><input type="checkbox" name="addees[3]" value="3">Test 3</label></div>
     </div>
 </div>

到目前为止，我知道如何按类名选择 div

document.getElementsByClassName("bi bj")[2];

【问题讨论】：

到目前为止你尝试过什么？我没有看到任何附加任何内容的尝试....请分享您的尝试并解释您似乎在哪里/哪个部分有问题。

标签： javascript html arrays

【解决方案1】：

有很多很棒的 HTML 模板解决方案。就个人而言，我喜欢http://handlebarsjs.com/，但有很多选择。我建议你看看。

也就是说，您也可以像这样主要自己做：

var items = [1, 2, 3];
var target = document.querySelector(".bi.bj .bi.bj");
var template = "<div><label class=\"bo bp\"><input type=\"checkbox\" name=\"addees[~id~]\" value=\"~id~\">Test ~id~</label></div>";

items.forEach(function(item) {
  target.insertAdjacentHTML("beforeend", template.replace(/~id~/g, item));
});

<div class="bi bj">
  <div class="bi bj">
    <strong>Suggestions</strong>
    <div><label class="bo bp"><input type="checkbox" name="addees[0]" value="0">Default</label></div>
  </div>
</div>

【讨论】：

【解决方案2】：

使用 for 循环：

for (var i = 0; i <= adees.length(); i++) {
    x = document.createElement('div').innerHTML = "<label class='bo bp'><input type='checkbox' name='adees[" + adees[i] + "]' value=" + adees[i] + ">Test " + adees[i] + "</label></div>";
    document.body.appendChild(x);
};

【讨论】：

第一个：adees.length，不带大括号，第二个：(x = document.createElement('div')).innerHTML 否则x 包含字符串，而不是 div，第三个。我怀疑document.body 是附加这些节点的正确位置

【解决方案3】：

我强烈建议你阅读一些 js 和 jquery 教程。

答案（它使用 jquery）

<div class="bi bj" id="uniqueId">
      <strong>Suggestions</strong>
      <div><label class="bo bp"><input type="checkbox" name="addees[0]" value="0">Default</label></div>
</div>
<script>
$(document).ready(function()) {
var array = [1,2,3];
array.forEach(function(elem){
    $('#uniqueId').append('<div><label class="bo bp"><input type="checkbox" name="addees[' + elem + ']" value="' + elem + '">Test' + elem + '</label></div>')
}, this);
}
</script>

【讨论】：

imo。最好先创建一个模板：function rowTemplate(elem){ return '<div><label class="bo bp"><input type="checkbox" name="addees[' + elem + ']" value="' + elem + '">Test' + elem + '</label></div>' }，然后将此模板应用于数据，并将整个/连接的结果附加到 DOM：$('#uniqueId').append( array.map( rowTemplate ).join('\n') )，而不是为数组中的每个项目解析标记和附加节点。跨度>
@Thomas 那段时间我错过了你的评论）谢谢你的反馈，我认为在某些情况下它是有意义的