JavaScript로 동적으로 HTML DIV를 복제합니다.

Question

나는 HTML, Java, AJAX 및 Heavy Javascript를 사용하여 데이터베이스에서 레코드를 가져 와서 사용자 검색 매개 변수를 기반으로 페이지에 동적으로 표시합니다. 아주 기본적인 개념 ... 내 질문은 반드시 "어떻게이 일을합니까?" 질문을 입력하십시오. 모든 방법을 설정했기 때문에 잘 작동합니다. 그러나 좀 더 정비하기 쉬운 코드를 만드는 약간 더 깨끗한 접근법이 있어야한다고 나는 믿는다. 내 주요 목표는 완전히 웹 페이지의 디자인 측면을 자바 스크립트에서 분리하여 웹 디자이너가 제시된 데이터의 모양을 변경하기 위해 자바 스크립트를 전혀 건드릴 필요가 없도록하는 것입니다. 현재 내가 어떻게 설정했는지 보여 주면서 시작하겠습니다.

HTML 페이지에서 컨테이너 DIV를 단순히 자리 표시 자로 사용하므로 Javascript에서 동적으로 생성 된 DIV를 삽입 할 수있는 곳이 있습니다. 그렇지 않으면 해당 컨테이너 DIV는 HTML에 따라 완전히 비어 있습니다.

자, 자바 스크립트로 다이빙. 데이터베이스에서 레코드를 가져올 때 for 루프를 사용하여 표시하려는 모든 데이터가 포함 된 DIV를 작성합니다. 그런 다음 for 루프 단순히 각 레코드에 대한 HTML 컨테이너 DIV에 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 경험이없는 설계자는이 데이터를 조작해야했지만 꽤 비참한 경험이었습니다. 언급 할 것도없이, 나는 디자이너가 내 JS 파일을 열지 않아도되는 것을 선호한다.

내가 취하고 싶은 접근법은 HTML에 모든 컨테이너 DIV를 만든 다음 Javascript를 사용하여 데이터를 작성하는 대신 해당 요소에 데이터를 삽입하는 것입니다. 그런 식으로 CSS 스타일링은 Javascript와 별도로 각 DIV에 적용될 수 있습니다. 그러나 HTML에서 한 행의 DIV를 만드는 경우 표시 할 각 레코드의 행을 복제하는 방법은 무엇입니까? 미리 디자인 된 요소를 Javascript로 복사하고 데이터를 채우고 표시 할 각 레코드에 대해 필요한만큼 행을 반복 할 수있는 방법이 있습니까?

Answer 1

여기에 자바 스크립트 라이브러리를 사용하고있는 것처럼 보이지 않습니다. jQuery를 사용하는 경우 간단하게 clone을 사용하여 요소의 전체 복사본을 만들 수 있습니다. Clone Docs

그렇지 않으면 cloneNode 메서드를 사용해야합니다. 그것은 또한 깊은 사본을한다.

어떻게해야합니까? 일반 html/css에서 요소를 한 번만 만들고 원하는대로 스타일을 지정하고 .hidden 클래스를 추가하면됩니다. #rootElement과 같은 ID를 지정하면 쉽게 복제 할 수 있습니다.

자바 스크립트에서 해당 요소를 복제하고 데이터로 채우고 .hidden 클래스를 제거하여 사용자가 볼 수있게 할 수 있습니다. 나머지 CSS 규칙은 계속 적용됩니다.