Javascriptで動的に重複するHTML DIV

Question

私はHTML、Java、AJAX、Heavy Javascriptを使用してデータベースからレコードを取り出し、ユーザーの検索パラメータに基づいてページに動的に表示します。かなり基本的なコンセプト...私の質問は必ずしも「私はこの仕事をどうやって作るのですか？私はすべてのセットアップを持っている方法は、それはちょうどうまく動作するので、タイプの質問。私はしかし、より保守的なコードを作成する少しきれいなアプローチが必要であると信じています。私の主な目標は、Webデザイナーが提示されたデータの外観を変更するためにJavascriptに全く触れる必要がないように、Javascriptから私のWebページのデザイン面を完全に分離できるようにすることです。私が現在どのように物事をセットアップしているかを見せてください。 HTMLページ

、私は単に私がJavaScriptから動的に作成div要素を挿入するためにどこかに持っているプレースホルダとしてコンテナDIVを使用しています。それ以外の場合、そのコンテナDIVはHTMLに従って完全に空です。

今、Javascriptに潜入する。私はデータベースからレコードを取り出すときに、forループを使用して、表示したいすべてのデータを含むDIVを構築します。あなたは、私が正常に動作します私のJavaScriptでHTMLタグの建物の多くをやってますが、あれば午前見ることができるように

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; 
} 

：その後、forループを使用すると、私は単純に各レコードのHTMLコンテナDIVにDIVを追加しますJavascriptの経験がないデザイナーはこのデータを操作しなければなりませんでしたが、かなり悲惨な経験になります。言うまでもなく、私はデザイナーが自分のJSファイルを開かなくても好きです。

私が取るしたいのアプローチは、HTML内のすべてのコンテナのdivを作成し、それらの要素にデータを挿入するだけではJavaScriptを使用してではなく、それらを作成する必要があります。そうすれば、CSSスタイリングはJavascriptとは別に各DIVに適用できます。しかし、HTMLで1行のDIVを作成すると、表示したいレコードごとに行を複製するにはどうすればよいですか？あらかじめ設計された要素をJavascriptにコピーし、データを記入し、表示する各レコードに対して必要に応じてその行を繰り返す方法がありますか？

Answer 1

ここではjavascriptライブラリを使用しているようには見えません。 jQueryを使用している場合は、単純にcloneを使用して要素のディープコピーを作成できます。 Clone Docs

は、そうでなければ、cloneNodeメソッドを使用する必要があります。ディープコピーもします。

どうすればいいですか？html/cssで要素を作成するとデザイナーにスタイルを付けさせてから、.hiddenクラスを追加するだけです。 #rootElementのようなIDを付けてください。後で簡単に見つけることができます。あなたのJavaScriptで

、ユーザーにそれが見えるように、その要素のクローンを作成し、データとそれを記入し、.hiddenクラスを削除することができます。残りのあなたのCSSルールはまだ適用されます。