如何在變量內的javascript中獲得換行符

Question

我有一個數組：

var social = [
 ["facebook",   "#link",    "#62b500", "images/facebook.png"],
 ["instagram",  "#link",    "#62b500", "images/instagram.png"],
 ["twitter",    "#link",    "#62b500", "images/twitter.png"]
 ];

我想在某些位置的圖標之間添加換行符或空格/邊距。

結果應如下所示：

Facebook
Instagram
----linebreak/free space---
twitter
----linebreak/free space---
something else
something else
something else

到目前為止，我的轉換代碼如下所示：

$("#socialside").append('<ul class="mainul"></ul>');

    /// generating bars
    for(var i=0;i<social.length;i++){
    $(".mainul").append("<li>" + '<ul class="scli" style="background-color:' + social[i][2] + '">' +
                        '<li>' + social[i][0] + '<img src="' + social[i][3] + '"/></li></ul></li>');
                    }

我必須添加換行符/空格有哪些可能性？ 我怎樣才能在我的 JavaScript 中實現這一點？

Answer 1

我是這樣弄的。 它會足夠好嗎？ 每次我想要不同的間距時，我都必須創建一個新循環，但至少它對我有用。

創建了一個將在 3 個元素上結束的循環。 然后從 3 到 4 個元素開始創建相同的循環，並在開頭添加</br> 。

for(var i=0;i<3;i++){
    $(".mainul").append("<li>" + '<ul class="scli" style="background-color:' + social[i][2] + '">' +
                        '<li>' + social[i][0] + '<img src="' + social[i][3] + '"/></li></ul></li>');

                    }


    for(var i=3;i<4;i++){
    $(".mainul").append("</br><li>" + '<ul class="scli" style="background-color:' + social[i][2] + '">' +
                        '<li>' + social[i][0] + '<img src="' + social[i][3] + '"/></li></ul></li>');
                    }

Answer 2

<br>或空的<li></li>可以完成這項工作。