輸出Javascript數組到HTML與更好的可讀性

Question

我想輸出的數據數組（通過this code生產）在一個簡單的網頁一個div，使用這個jQuery：

$('#submit').click(function(e) { 
     e.preventDefault();  
     var num = $('#userInput').val();  
     var primes = sieve(num);   // sieve() produces array of prime numbers 
     console.log(primes);   
     $('#answer').html(primes); 
    }); 

控制檯是按照我希望看到的那樣記錄陣列（即2,3,5,7,11,13等），但#answer中的內容不顯示任何格式（23571113等）。

如何獲取數據以更易讀的格式顯示？我試過使用.split和.join來添加逗號或換行符，但沒有快樂......

Answer 1

只需使用您想要使用的任何分隔符將數組連接到字符串。此外，在文本，是不是HTML，不使用html填充時，使用text：

$('#answer').text(primes.join(", ")); 

---

你（和觀望者）可能會奇怪，爲什麼你沒有得到默認Array#toString行爲，這是做.join()（其中join默認爲分隔符","）。原因是html函數將數組的每個元素單獨添加到目標元素，作爲新的文本節點，而不是在陣列上調用toString。 （這似乎並非是documented behavior。）令人驚訝，但這是事實：

var answer = $("#answer"); 
 
answer.html([1, 2, 3, 4, 5]); 
 
console.log(answer[0].childNodes.length); // 5

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

text適用toString，但使用的是默認分隔符（","，,後沒有空格）可能是不你想要什麼：

var answer = $("#answer"); 
 
answer.text([1, 2, 3, 4, 5]); 
 
console.log(answer[0].childNodes.length); // 5

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

Answer 2

一個簡單的方法是使用.text()而不是.html()來設置#answer元素的內容。您還必須使用.join()方法連接數組的值。

$('#submit').click(function(e) { 
     e.preventDefault();  
     var num = $('#userInput').val();  
     var primes = sieve(num);   // sieve() produces array of prime numbers 
     console.log(primes);   
     $('#answer').text(primes.join(", ")); 
    }); 

或者，如果你真的想將其添加爲HTML，在pre元素，保留其包裝空白：

$('#submit').click(function(e) { 
     e.preventDefault();  
     var num = $('#userInput').val();  
     var primes = sieve(num);   // sieve() produces array of prime numbers 
     console.log(primes);   
     $('#answer').html('<pre>' + primes.join(", ") + '</pre>'); 
    });