jQueryの.html（）関数でJavaScript配列の値を出力するにはどうすればいいですか？

Question

私は、一連の文字列を含むJavaScript配列を持っています。私はそれらをjのQueryまたはJavaScriptを使って行単位でHTMLのdiv要素に表示したいと思います。

私のコードは今までです：

var data = data; 
for (i = 1; i <= data.length; i++) { 

    data[i] = data[i] + '<br />'; 

    $(target).html('<a>'+data[i]+'</a>'); 
} 

私のデータは、今この瞬間に表示されます。

私は彼らが（タグ内）にリンクとしてこのように表示したい

Labelling MachinesLabels - Plastic, Metal, Foil etcLabels FabricLaboratories - MedicalLaboratories - TestingLaboratory Equipment & SuppliesLaboratory Equipment Services & Calibration 

：事前

Answer 1

あなたはリンクタグの外で休憩を追加し、それは完全に指定された要素のinnerHTMLプロパティを置き換えると、一度だけ）（.htmlを使用する必要があり、つまり、私は別のアプローチを示唆し

str = ""; 
for (i = 1; i <= data.length; i++) { 
    str += "<a>" + data[i] + "</a><br />"; 
} 
$(target).html(str); 

、使用します別の答えが既に記載されているのでinnerHTML（javascript）またはappend（jquery）

for (i = 1; i <= data.length; i++) { 
    target.innerHTML += "<a>" + data[i] + "</a><br />"; 
} 

Answer 2

var data = data; 
var str = ''; 
for (var i = 1; i <= data.length; i++) { 

    str += `<a>${data[i]}<br /></a>`; 

} 
$(target).html(str); 

で

Labelling Machines 
Labels - Plastic, Metal, Foil etc 
Labels Fabric 
Laboratories - MedicalLaboratories - Testing 
Laboratory Equipment & Supplies 
Laboratory Equipment Services & Calibration 

おかげでこれを試してみてください。

Answer 3

最もクリーンな方法はdivにラップされます。また、既にターゲットに追加されている初期データをオーバーライドしないために.append（）メソッドを使用する必要があります。

var data = ["Hello", "World", "Lorem", "Ipsum", "More length"]; 
 
for (var i = 0; i < data.length; i++) { 
 
    $("#result").append('<div><a href="#" class="link">' + data[i] + '</a></div>'); 
 
}

.link { 
 
    color: #5ca5cc; 
 
    margin-bottom: 10px; 
 
    text-decoration: none; 
 
}

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

作業のデモと一緒にクリーンで、より簡単なコード。あなたは、iはどこでもcode.Alsoであなたが第一インデックスからループに始まる

代わりの反復ごとにDOMに追加されている変数宣言した文字列を作成し、CONCAT持っている場合

Answer 4

あなたのコードが不完全here.Not確かですその価値。反復の完了時に追加します。代わりにあなたがmapとtemplate literalで1行にES6を使用することができfor/loopの

var data = data, 
htmlString=""; 
for (var i = 0; i <= data.length; i++) { 
htmlString+= data[i] + '<br />'; 
} 
$(target).append(htmlString); 

Answer 5

。あなたは私の答えをチェックappendメソッドを使用する必要が

$(target).html(arr.map(el => `<a>${el}</a><br/>`)); 

DEMO