输出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>'); 
    });