使用javascript在元素之间添加空格/新行

Question

所以我试图显示我的 Firebase 数据库中的所有问题和响应。它显示得很好，但看起来很难看，因为问题和回答之间没有空格。我尝试使用createElement 功能以及.innerHTML 添加不间断空格。没有任何工作。这是我到目前为止的代码：感谢您的帮助！

<button id="all" onclick="button()"> View All </button>
<h4> All Users: </h4>

<script>
    function button(){
        var userRef = new Firebase("https://speedpoll-1fd08.firebaseio.com");
        userRef.on("value", function(snapshot) {
            // The callback function will get called twice, once for "fred" and once for "barney"
            snapshot.forEach(function(childSnapshot) {
                // key will be "fred" the first time and "barney" the second time
                var key = console.log(childSnapshot.key());
                // childData will be the actual contents of the child
                // var userInfo = console.log(childSnapshot.val());
                var element = document.getElementById("viewAll");
                var para = document.createElement("h5");

                var node = document.createTextNode("Question: " + childSnapshot.key());
                console.log(childSnapshot.child("Option1").child('Response1').val());
                var node1= document.createTextNode("Response 1: " + childSnapshot.child("Option1").child('Response1').val());
                //var space = document.createElement("&nbsp;");
                element.innerHTML += "&nbsp;";
                var node2= document.createTextNode("Response 2: " + childSnapshot.child('Option2').child('Response2').val());
                var node3= document.createTextNode("Response 3: " + childSnapshot.child('Option3').child('Response3').val());
                para.appendChild(node);
                //para.appendChild(space);
                para.appendChild(node1);
                para.appendChild(node2);
                para.appendChild(node3);
                element.appendChild(para);

            });
        });

    }
</script>
<div id="viewAll">
</div>

Answer 1

您可以通过添加 <hr> 元素来添加一行，如下所述：http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479441

喜欢这个：

---

您还可以为每个元素添加 <div> 部分，并使用 CSS 设置边距、填充和边框的样式。 <p> 部分也是如此。

你可以玩弄这个 JSFiddle：

 http://jsfiddle.net/jmgomez/n0e1ev8e/

还可以查看如何使用 CSS 设置边框样式：http://www.w3schools.com/css/css_border.asp