ブラウザに表示するためのデータを取得できません

Question

Firebaseを使用してログインできるWebアプリケーションがあります。詳細がFirebaseデータベースに保存されていることはわかっています。私は、特定のフィールドのブラウザに表示されるusername値を必要とします。ここにスクリーンショットがあります。

これは火災基地データです。この写真では、ユーザ名karthik babuを参照してください。

だから、代わりに、ユーザー名の、私が表示される実際のユーザ名値が必要になります。

私はそのユーザ名下記画像の領域に表示されるようにしたいです。私が試した

var provider = new firebase.auth.GoogleAuthProvider(); 
    provider.addScope('https://www.googleapis.com/auth/plus.login'); 
    firebase.auth().signInWithPopup(provider).then(function(user) { 
     var token = user.credential.accessToken; 
     var user = user.user; 
var usersRef = firebase.database().ref("WoofyDesktop/UserList"); 
     if (user) { 
      usersRef.child(user.uid).set({ 
useremail: user.email, 
useruid: user.uid, 
      username: user.displayName 
}); 

firebaseコードを取得する：ここで

は、私が試したコードであるユーザ名の

var rootRef = firebase.database().ref().child("UserList"); 
    rootRef.on("child_added", snap => { 

var username = snap.child("username").val(); 

    $("username").append("<div><a><label>" + username + "</label></a></div>"); 
    console.log(username); 

    }); 

htmlコード..

<div> 
    <a href="#" class="user"> 
<label for="username" id="username" >username</label> 


    </a></div> 

上の任意の提案方法やどのような必要なデータを表示するために変更する必要がありますか？

編集：aks79の回答と同様に更新されたクエリを試してみると、これは私が得ているものです。どんな洞察？あなたがラベルタグラベルタグの 制限内の別のラベルを埋め込むことはできません

Answer 1

... https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

HTMLコード

のようにそれを使用してみてください代わりに

をdiv要素のような別のタグを使用します

<div class="user" id="username"></div> 

とjqueryとして

$("#username").append("<a href='javascript:void(0)'><label>" + username + "</label></a>");