无法检索要在浏览器中显示的数据

Question

我有一个网络应用程序，我可以使用Firebase登录。我知道详细信息存储在Firebase数据库中。我希望用户名值在某个字段中显示在浏览器上。这是截图。

这是firebase数据。在此图片中，请参阅用户名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 使用不同的标签，如div而不是

尝试使用它

HTML代码

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

和jquery为

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