jQuery ile DOM'a HTML'yi yerleştirmenin en iyi yolu nedir?

Question

Bir kullanıcının bir güne tıklamasına izin veren bir takvim sayfası üzerinde çalışıyorum ve o gün için bir form girecek bir form giriyorum.

jQuery ile DOM manipülasyonuna yabancı değilim, ama bu daha önce yaptığım bir şeydi ve bunu yapmanın daha etkili bir yolu olup olmadığını merak etmeye başlıyorum.

HTML'yi JavaScript içinde elle oluşturmak, performans açısından en etkili yoldur (bunun doğru olduğunu, appendTo() gibi işlevler kullanılarak doğru olduğunu varsayardım) veya DOM içinde gizli bir yapı oluşturup daha iyi klonlamak ister misiniz?

İdeal olarak, kod temizliği ve performans arasında bir denge sağlamak için bunu yapmanın en iyi yöntemini bilmek istiyorum.

sayesinde

Answer 1

JavaScript'te çok sayıda HTML dizesiyle çalışmak çok çirkin bir şekilde çok hızlı olabilir. Bu nedenle bir JavaScript "şablon motoru" dikkate değer olabilir. Karmaşık olmalarına gerek yok - Resig tarafından this one'a bakın.

Eğer bunun için uygun değilseniz, o zaman olduğu gibi devam etmek muhtemelen iyi olacaktır. Sadece dize manipülasyonu ile karşılaştırıldığında DOM manipülasyonunun oldukça yavaş olduğunu unutmayın.

bu performans boşluğu örneği:

// DOM manipulation... slow 
var items = ['list item 1', 'list item 2', 'list item 3']; 
var UL = $('<ul/>'); 
$.each(items, function(){ 
    UL.append('<li>' + this + '</li>'); 
}); 

// String manipulation...fast 
var items = ['list item 1', 'list item 2', 'list item 3']; 
var UL = $('<ul/>').append('<li>' + items.join('</li><li>') + '</li>'); 

Answer 2

Here Eğer açıklama bulabilirsiniz olacaktır.

Answer 3

Belki en popüler yaklaşım.

Arka uçta oluşturulan html kodu var. Iletişim css gizli div içinde olacaktır. "Pop" yapmak istediğinizde, sadece farklı css stilleri uygulayın ve gizli bir giriş değerini değiştirin (iletişim kutusunun belirli bir tarihle etkileşimde olduğunu tahmin ediyorum).