AppenChild動態h3到動態div問題

我嘗試插入一個動態h3到動態div，hovewer有些奇怪，因爲它被插入到lblUser div之外。我也想在「角色」h3之後插入。AppenChild動態h3到動態div問題

這裏是我的代碼：function 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); 


    } 

}

來源

2017-10-11 codeDragon

您不關閉'lblUser.innerHTML'中的'img'和'h3'標籤。嘗試修復它。 – guest

我可以看到幾件事錯的代碼，例如：

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 string interpolation來創建這些標籤，這將清理您的代碼並向您顯示這些類型的錯誤。

來源

2017-10-11 14:08:55

謝謝。這工作得很好。但現在附加在按鈕元素後面。那麼你如何將h3追加到特定的位置呢？我希望它在作爲div中第三個元素的角色h3之後。這就是說我希望h3在第四位。 – codeDragon

我會親自將它們追加到正確的順序中，但是如果您需要在特定元素之後或之前插入，則可以使用以下三個選項：'.insertBefore（）'，'.insertAdjacentElement（）'或'.insertAdjacentHtml（） –

AppenChild動態h3到動態div問題

回答

相關問題