web-dev-qa-db-ja.com

配列要素からdivを作成する

配列にさまざまな文字列があります。 HTMLページの配列要素ごとに<div id="results"></div>のようなdivを作成することは可能ですか？

javascriptjqueryhtmlcordova
11
mike643

フレームワークやライブラリを使用しない、確かで単純な例：

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/

9
Shaz

ええ、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>_

必要に応じて、VanillaJavaScriptでもこれを行うことができます。

_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ループによって複数のone要素が生成される場合、両方の提案で行ったように、代わりに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>_

参照：

20
David says reinstate Monica

Basic For Loop + jQueryがそれを行う必要があります。 bodyを、divを追加するコンテナーのセレクターに置き換えるだけです。 ここにフィドルがあります 使用中のテクニックを示しています。

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

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

使用できます

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

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

使用済み $.each() ドキュメント 、またidは一意である必要があるため、idをclassに変更しました。

デモathttp://jsfiddle.net/gaby/FuPF7/

0
Gabriele Petrioli