前提・実現したいこと
firebaseを使用してLINE風のチャットアプリを作ろうとしています
UIもLINEのようにスタイルをつけたいです
発生している問題・エラーメッセージ
Child_addedを使用して送信ボタンで子要素を表示していますが
その子要素たちにcssを適用することができません
どなたかご教示いただけますか、、よろしくお願いします
該当のソースコード
<html> <div class="box1"> <div>name<input type="text" id="username"></div> <textarea id="text" rows="4"></textarea> <div id="time"></div> </div> <a id="send" > 送信 </a> </div> <div id="output"> <div class="one"><p id="username"></p></div> <div class="two"><p id="text"></p></div> <div class="three"><p id="time"></p></div> </div> <jQuery> const newPostRef = firebase.database().ref(); $("#send").on("click",function(){ const Date = getNow() newPostRef.push({ username:$("#username").val(), text:$("#text").val(), date:Date, }); });newPostRef.on('child_added',function(data){
const v = data.val();
const str = '<p>'+v.username+'<br>'+v.text+'<br>'+v.date+'</p>';
$("#output").append(str);
$('#output').animate({scrollTop: $('#output')[0].scrollHeight}, 'fast');
});
試したこと
outputの方をdivでそれぞれくくってone/two/threeでcssつけても反応なしでした、、
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー