2016-10-24 15 views
0

Firebaseデータベースからすべての質問と回答を表示しようとしています。それはうまく表示されていますが、質問と回答の間にスペースがないので、醜いように見えます。私はcreateElement機能と.innerHTMLを使用して改行しないスペースを追加しようとしました。何も働いていません。これまで私が持っているコードは次のとおりです:あなたの助けをありがとう!javacriptで要素間に空白/改行を追加する

<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> 
ここで説明したようにあなたは、 <hr>要素を追加することによって、行を追加することができます
+0

P.S.を何らかの理由で貼り付けられたコードにはボタンがありません。 –

+0

単純な
タグを使用してスペースを作成してみませんか? – Eric

+0

どのように私はjavascriptの中でそれを実装するのですか? –

答えて

0

:同様http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479441

をこの1: は


また、各要素の <div>セクションを追加することができ、およびスタイルマージン、パディングCSSとの境界線です。 <p>セクションでも同じです。

あなたはこのJSFiddleで遊ぶことができます。

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

はCSSでボーダーのスタイルを設定する方法についても、これをチェックアウト:http://www.w3schools.com/css/css_border.asp

+0

これは本当に役に立ちません。私はコメントを感謝しますが、私はCSSを使用する方法を知っています。問題は、これらの要素を作成するためにjavascriptを使用することです。それは私が使用する必要があるものです。 –

+0

もっと精巧にするために、私はidの "viewAll"でdiv内にp要素を作成し、firebaseデータベースから引っ張った質問と応答を入れています。 –

+0

唯一の問題は、次のような印刷結果になることです。 –

関連する問題