使用Javascript動態複製HTML DIV

Question

我使用HTML，Java，AJAX和Heavy Javascript將記錄從數據庫中提取出來，並根據用戶搜索參數在頁面上動態顯示它們。非常基本的概念......我的問題不一定是「我如何使這項工作？」因爲我設置了一切的方式，它的工作原理很好。但我確實相信必須有一個稍微乾淨的方法來創建更多可維護的代碼。我的主要目標是能夠將我的網頁的設計方面與Javascript完全分開，以便網頁設計師根本不必觸碰Javascript即可更改所呈現數據的外觀。讓我首先向你展示我目前如何設置事物。

在HTML頁面上，我只是使用容器DIV作爲佔位符，所以我有一個地方可以從Javascript插入動態創建的DIV。否則，根據HTML，該容器DIV是完全空的。

現在，潛入Javascript中。當我從數據庫中提取記錄時，我使用for循環來構建一個包含我希望顯示的所有數據的DIV。然後使用for循環，我只是追加DIV到HTML容器DIV每個記錄：

function getPhoneNumbers() { 
    var length = contact.phone.length; 

    if(length > 0) { 
     //Remove any previous numbers. 
     var container = document.getElementById('popupPhoneNumbers'); 
     clearAllChildNodes(container); 

     for(var i=0; i<length; i++) { 
      container.appendChild(new phoneNumberRow(i, contact.phone[i])); 
     } 
    } 
} 

function phoneNumberRow(id, phoneNumber) { 
var rowDiv = document.createElement('div'); 
rowDiv.id = 'popup-phone-number-' + id; 
rowDiv.setAttribute('onmouseover', 'toggleEditPhone(' + id + ');'); 
rowDiv.setAttribute('onmouseout', 'toggleEditPhone(' + id + ');'); 

//Set primary class. 
var primaryClass = 'primary-off'; 

if(phoneNumber.isPrimary) { 
    primaryClass = 'primary-on'; 
} 

//Primary button display 
var primaryContainer = document.createElement('div'); 
primaryContainer.id = rowDiv.id + '-primary'; 
primaryContainer.setAttribute('class', primaryClass); 
primaryContainer.style.display = 'inline'; 
var primaryButton = document.createElement('a'); 
primaryButton.setAttribute('onclick', 'PhoneUtility.setPrimary(' + id + ');'); 
primaryButton.innerHTML = 'P'; 
primaryContainer.appendChild(primaryButton); 

//Phone number display 
var phoneNumberRow = document.createElement('div'); 
phoneNumberRow.style.display = 'inline'; 
phoneNumberRow.innerHTML = phoneNumber.type + ' ' + phoneNumber.number; 

//Edit buttons display 
var editButtonsContainer = document.createElement('div'); 
editButtonsContainer.id = rowDiv.id + '-edit'; 
editButtonsContainer.style.display = 'none'; 
var editButton = document.createElement('a'); 
editButton.setAttribute('onclick', 'PhoneUtility.edit(' + id + ');'); 
editButton.innerHTML = 'Edit'; 
editButtonsContainer.appendChild(editButton); 
var deleteButton = document.createElement('a'); 
deleteButton.setAttribute('onclick', 'PhoneUtility.remove(' + id + ');'); 
deleteButton.innerHTML = 'Delete'; 
editButtonsContainer.appendChild(deleteButton); 

//Append all children to container. 
rowDiv.appendChild(primaryContainer); 
rowDiv.appendChild(phoneNumberRow); 
rowDiv.appendChild(editButtonsContainer); 

return rowDiv; 
} 

正如你可以看到我做了很多的HTML標籤的建築在我的JavaScript，它工作得很好，但如果一個沒有Javascript經驗的設計師不得不操縱這些數據，這將是一個相當悲慘的經歷。更何況，我更喜歡設計師甚至不必打開我的JS文件。

我想要採取的方法是在HTML中創建所有容器DIV，然後使用JavaScript將數據插入這些元素，而不必創建它們。這樣，CSS樣式可以單獨應用於每個DIV。但是，如果我在HTML中創建一行DIV，我該如何去複製要顯示的每條記錄的行？有什麼方法可以簡單地將預先設計的元素複製到Javascript中，填寫數據並根據需要爲每個要顯示的記錄重複該行？

Answer 1

它看起來不像你在這裏使用的JavaScript庫。如果您使用的是jQuery，則可以簡單地使用clone來製作元素的深層副本。 Clone Docs

否則您需要使用cloneNode方法。它也做了很深的複製。

我該如何做到這一點是在純html/css中創建元素，讓你的設計師風格，但他想要的，然後只需添加一個.hidden類。給它一個類似#rootElement的ID，以便稍後可以輕鬆找到它進行克隆。

在您的JavaScript中，您可以克隆該元素，填充數據，並刪除.hidden類以使其對用戶可見。其餘的CSS規則仍然適用。