从Array元素创建div

Question

我的数组中有不同的字符串.是否可以<div id="results"></div>在HTML页面中为每个数组元素创建一个div ？

Answer 1

是的,使用for循环:

var arrayVariable = ['one','two','three'],
    arrayLength = arrayVariable.length;

for (i = 0; i < arrayLength; i++) {
  $('<div class="results" />').text(arrayVariable[i]).appendTo('body');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者更多jQuery-fied:

var arrayVariable = ['one', 'two', 'three'];

$.each(arrayVariable, function(index, value) {
  $('<div />', {
    'text': value
  }).appendTo('body');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果您愿意,也可以在vanilla JavaScript中执行此操作:

var arrayVariable = ["one", "two", "three"];
var arrayLength = arrayVariable.length;
var temp;

for (i = 0; i < arrayLength; i++) {
  temp = document.createElement('div');
  temp.className = 'results';
  temp.innerHTML = arrayVariable[i];
  document.getElementsByTagName('body')[0].appendChild(temp);
}

值得考虑的来源id是什么; 如果超过一个元素是由该生产for循环中,它可能会更好(这取决于在哪里,以及如何将id被分配)使用class,而不是,因为我在我的两个建议做了,因为id 必须是内唯一文献.

虽然这个答案是在很久以前写的,但我觉得值得更新以反映(相对较新的)提供的可能性Array.prototype.forEach(),它迭代给定数组的每个元素,并为每次迭代应用一个函数.例如,给定HTML:

<ul id="fruits"></ul>

和JavaScript:

var fruitsList = document.getElementById('fruits'),
    li = document.createElement('li'),
    clone;
['apples','bananas','cranberries'].forEach(function (fruit, index) {
    clone = li.cloneNode();
    clone.textContent = index + ': ' + fruit;
    fruitsList.appendChild(clone);
});

导致输出:

<ul id="fruits">
    <li>0: apples</li>
    <li>1: bananas</li>
    <li>2: cranberries</li>
</ul>

var fruitsList = document.getElementById('fruits'),
  li = document.createElement('li'),
  clone;
['apples', 'bananas', 'cranberries'].forEach(function(fruit, index) {
  clone = li.cloneNode();
  clone.textContent = index + ': ' + fruit;
  fruitsList.appendChild(clone);
});

<ul id="fruits"></ul>

参考文献:

• JavaScript的:
  • Array.prototype.forEach().
  • document.createElement().
  • document.getElementById().
  • document.getElementsByTagName().
  • Element.className.
  • Element.innerHTML.
  • Node.appendChild().
  • Node.cloneNode().
  • Node.textContent.
• jQuery的:
  • appendTo().
  • $.each().
  • text().

Answer 2

当然,没有使用任何框架或库的简单示例:

var cars = 'Saab,Volvo,BMW,GMC,Nissan,Ford'.split(',');
for (var c in cars) {
    var newElement = document.createElement('div');
    newElement.id = cars[c]; newElement.className = "car";
    newElement.innerHTML = cars[c];
    document.body.appendChild(newElement);
} 

您可以在这里使用jsFiddle来了解它是如何工作的:http://jsfiddle.net/Shaz/geNNa/