Блог

В моем массиве есть разные строки. Возможно ли создать divs типа <div id="results"></div> для каждого элемента массива на моей HTML-странице?

Да, используя 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:

 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>  

Вы могли бы сделать это и в ванильном 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() .

Конечно, простой пример без использования каких-либо фреймворков или библиотек:

 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 /

Базовый цикл For jQuery должен это сделать. Просто замените body селектором для контейнера, в который вы хотите добавить divs. Вот скрипка, демонстрирующая используемую технику.

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

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

Вы можете использовать

 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, а также изменил идентификатор на class, поскольку идентификатор должен быть уникальным.

демонстрация на http://jsfiddle.net/gaby/FuPF7 /