在javascript数组元素之间添加换行符

Question

I wonder if someone can help with this task; I found this great code for a daily quote and I am just trying to put a line break between the daily quote and the author of the quote. I thought maybe creating a two dimensional array would make it easier, but unfortunately I couldn't figure out how to put the line break. Thank you. Here is the code so far:

<script type="text/JavaScript"> 

var quote = new Array()
for (i=0; i<7; i++){
quote[i] = new Array(6)
}

quote[0][0] = 'If you want to go fast go alone, if you want to go far go together!'; 
quote[0][1] = 'African Proverb';
quote[1][0] = 'We either make ourselves happy or miserable. The amount of work is the same.'; 
quote[1][1] = 'Carlos Castaneda'; 
quote[2][0] = 'Everything should be made as simple as possible, but not any simpler.'; 
quote[2][1] = 'Albert Einstein';
quote[3][0] = 'Failure is the mother of success.'; 
quote[3][1] = 'Chinese Proverb'; 
quote[4][0] = 'The first to apologize is the bravest. The first to forgive is the strongest. The first to forget is the happiest.' 
quote[4][1] = 'Unknown';
quote[5][0] = 'If an egg is broken by an outside force, life ends. If it is broken by an inside force life begins. Great things happen from the inside.'; 
quote[5][1] = 'Unknown';
quote[6][0] = 'Simplicity is the ultimate sophistication.' 
quote[6][1] = 'Leonardo Da Vinci';

var qlen = quote.length;
var firstDate = new Date(2016,2,25);//start date (yyyy,m,d) - m=0=January, m=1=February
var today = new Date();//today
var dif = Math.floor((today-firstDate)/1000/60/60/24);//difference in days
while(dif>=qlen){//calculate the index of the quote of the day 
dif=dif-qlen;//restart the array index if the difference is greater that the    array's length 
} 
var todayQuote = quote[dif][0];//the quote of the day 
var todayQuoteOwner = quote[dif][1];//author of the quote of the day

onload = function(){document.getElementById('q').firstChild.data = todayQuote + </n>  + document.getElementById('qu').firstChild.data = todayQuoteOwner}


</script> 

<div>  id='q'; </div>  

Answer 1

First thing I recommend is moving the <script></script> content to the end rather than the beginning, so that way there's no need for an onload function.

Your javascript also refers to a qu element but your html code didn't include it. For the time being I'm going to assume it's just another div but feel free to correct me if I'm wrong.

Your javascript also seems to set the quote and author to a firstChild.data but your html doesn't have any children in the div . So if you actually were to run this, there will be a null error therefore I've added a nested <p /> to each. And for the sake of testing, I've included innerHTML as well so you can see the results.

<div id="q"><p></p></div>
<div id="qu"><p></p></div>

<script type="text/JavaScript">
    // ... generate the quotes and authors ...
    var qElement = document.getElementById('q');
    var quElement = document.getElementById('qu');

    qElement.firstChild.innerHTML = qElement.firstChild.data = todayQuote;
    quElement.firstChild.innerHTML = quElement.firstChild.data = todayQuoteOwner;
</script>

If you're looking to just have one element container for both the quote and author, then just get rid of the qu element altogether and separate the two parts by a < br/> element.

<div id="q"><p></p></div>

<script type="text/JavaScript">
    // ... generate the quotes and authors ...
    var qElement = document.getElementById('q');

    qElement.firstChild.innerHTML = qElement.firstChild.data = todayQuote + '<br/>' + todayQuoteOwner;
</script>