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

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>");