如何在jQuery .html（）函數中打印javascript數組值？

Question

我有一個包含一組字符串的JavaScript數組。我想用jQuery或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 

我希望他們顯示類似這樣的鏈接（內標籤）：

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

在此先感謝

Answer 1

您應該添加中斷的鏈接標籤之外，它的.html（）只有一次，因爲它完全替代了給定元素的innerHTML，即

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

我建議另一種方法，使用innerHTML的（JavaScript的）或另一種答案已經提到

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); 

試試這個。

Answer 3

最徹底的方法追加（jQuery的）將被包裹在一個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>

清潔和更簡單的代碼與工作演示一起。

Answer 4

你的代碼是不完整的here.Not知道你是否有聲明變量i在code.Also任何地方，你是從第一個指數開始循環

而不是追加到DOM在每個迭代上，創建一個字符串和CONCAT的對它的價值。在完成迭代後追加它。

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

Answer 5

取而代之的是for/loop，你可以在一行中使用ES6與map和template literal。

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

DEMO