Question

我的数组中有不同的字符串。是否有可能创建一个div 我的HTML页面中的每个数组元素都是<div id="results"></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/

Answer 3

Basic For Loop + jQuery应该这样做。只需将body替换为要添加div的容器的选择器即可。 Here is a fiddle显示正在使用的技术。

var myCars=new Array("Saab","Volvo","BMW");

for(var x=0; x<myCars.length; x++){
    $('body').append('<div id="' + myCars[x] + '">' + myCars[x] + '</div>');
}

Answer 4

您可以使用

var results = ['result 1', 'result 2', 'result 3'];

$.each(results, function(idx, value){
  var newdiv = $('<div>',{class: 'results', text: value});
  $('body').append( newdiv  );
});

使用$.each() ^docs，并且还将id更改为class，因为id必须是唯一的。

演示 http://jsfiddle.net/gaby/FuPF7/

从Array元素创建div

4 个答案: