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

Question

So I am attempting to display all the questions and responses from my Firebase database. It is showing up fine, but it looks ugly, because there is no space between the question and responses. I've tried using the createElement feature as well as .innerHTML to add a nonbreaking space. Nothing is working. Here is the code I have thus far: Thanks for your help!

<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

You can add a line by adding an <hr> element, as explained here: http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479441

Like this one:

---

You can also add <div> sections for each element, and style the margins, paddings and borders with CSS. The same for <p> sections.

You can play around with this JSFiddle:

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

Check this out also on how to style borders with CSS: http://www.w3schools.com/css/css_border.asp