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

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

1 个答案: