AppenChild 动态 h3 到动态 div 问题

Question

我尝试将动态 h3 插入到动态div 中，当它插入到 lblUserdiv 之外时，有些东西很奇怪。我也想在"角色"h3之后插入。

这是我的代码：函数 showUsers（） {

  lblUserList.innerHTML = "";
  for ( var i = 0; i < ajUserDataFromServer.length; i++ ) {
      var lblUser = document.createElement('div');
      lblUser.innerHTML = '<div class="lblUser">' + '<img src="' + ajUserDataFromServer[i].image + '" alt="user" class="lblUserImage" data-userImage="' + ajUserDataFromServer[i].image + '">' + '<h3 class="lblUserId">' + 'Id:' + ' ' + ajUserDataFromServer[i].id + '</h3>' + '<h3 class="lblUserRole" data-userRole="' + ajUserDataFromServer[i].role + '">' + 'Role:' + ' ' + ajUserDataFromServer[i].role + '</h3>' + '<h3 class="lblUserName" data-userName="' + ajUserDataFromServer[i].name + '">' + 'Name:' + ' ' + ajUserDataFromServer[i].name + '<h3 class ="lblUserLastName" data-userLastName="' + ajUserDataFromServer[i].lastname + '">' + 'Lastname:' + ' ' + ajUserDataFromServer[i].lastname + '</h3>' + '<h3 class="lblUserPassword" data-userPassword="' + ajUserDataFromServer[i].password + '">' + 'Password:' + ' ' + ajUserDataFromServer[i].password + '</h3>' + '<button id="btnEditUserBody" class="btnShowPage btnEditUser" data-userId="' + ajUserDataFromServer[i].id + '" data-showThisPage="pageUpdateUser">' + 'EDIT USER' + '</button>' + '<button class="btnDeleteUser" data-userId="' + ajUserDataFromServer[i].id + '" >' + 'DELETE USER' + '</button>' + '<h3 class="lblErrorMessage" id="lblDeleteUserErrorMessage">' + '</h3>' + '</div>';
        if ( ajUserDataFromServer[i].email ) {
        var lblUserEmail = document.createElement('h3');     
        lblUserEmail.innerHTML =  '<h3 class="lblUserEmail" data-userEmail="' + ajUserDataFromServer[i].email + '">' + 'Email:' + ' ' + ajUserDataFromServer[i].email + '</h3>';
        lblUser.appendChild( lblUserEmail );
        }
       if ( ajUserDataFromServer[i].phonenumber ) {
        var lblUserPhoneNumber = document.createElement('h3');     
        lblUserPhoneNumber.innerHTML = '<h3 class="lblUserPhoneNumber" data-userPhoneNumber="' + ajUserDataFromServer[i].phonenumber + '">' + 'Phone-number:' + ' ' + ajUserDataFromServer[i].phonenumber + '</h3>';
        lblUser.appendChild( lblUserPhoneNumber );
        }

        lblUserList.appendChild( lblUser );

    }
}

Answer 1

我可以看到代码的一些错误，例如：

var lblUserEmail = document.createElement('h3');     
lblUserEmail.innerHTML =  '<h3 class="lblUserEmail" data-userEmail="' + ajUserDataFromServer[i].email + '">' + 'Email:' + ' ' + ajUserDataFromServer[i].email + '</h3>';

应该是这样的：

var lblUserEmail = document.createElement('h3');  
lblUserEmail.classList.add("lblUserEmail");
lblUserEmail.setAttribute("data-userEmail", ajUserDataFromServer[i].email);
lblUserEmail.innerText =  'Email:' + ' ' + ajUserDataFromServer[i].email;

现在您可以附加它：

lblUser.appendChild(lblUserEmail);

如果你按照自己的方式做，你会得到嵌套的h3和div元素。

此外，您需要关闭您的 img 标签。我可以建议在代码中或使用新的 es5 字符串插值创建这些标签，这将清理您的代码并向您显示这些类型的错误。