jQuery के साथ डीओएम में एचटीएमएल इंजेक्ट करने का सबसे अच्छा तरीका क्या है?

Question

मैं एक कैलेंडर पेज पर काम कर रहा हूं जो उपयोगकर्ता को एक दिन पर क्लिक करने की अनुमति देता है, और उस दिन के लिए एक प्रविष्टि दर्ज करता है जो पॉप अप करता है।

मैं jQuery के साथ डोम मैनिपुलेशन के लिए कोई अजनबी नहीं हूं, लेकिन यह कुछ ऐसा है जो मैंने पहले किया है और मुझे आश्चर्य है कि ऐसा करने का एक और अधिक प्रभावी तरीका है?

जावास्क्रिप्ट के भीतर मैन्युअल रूप से एचटीएमएल का निर्माण करना सबसे प्रभावी तरीका प्रदर्शन के रूप में होगा (मुझे लगता है कि यह सच है, appendTo() आदि जैसे कार्यों का उपयोग करने पर या डीओएम के भीतर एक छिपी हुई रचना का निर्माण करेगा और फिर क्लोनिंग बेहतर होगा?

आदर्श रूप से मैं कोड स्वच्छता और प्रदर्शन के बीच संतुलन प्रदान करने के लिए ऐसा करने का इष्टतम तरीका जानना चाहता हूं।

धन्यवाद,

Answer 1

जावास्क्रिप्ट में एचटीएमएल तारों के विशाल भाग के साथ काम करना बहुत बदसूरत हो सकता है। इस कारण से जावास्क्रिप्ट "टेम्पलेट इंजन" पर विचार करना उचित हो सकता है। उन्हें जटिल होने की आवश्यकता नहीं है - Resig द्वारा this one देखें।

यदि आप इसके लिए नहीं हैं तो शायद यह ठीक है कि आप अभी भी जारी रहें। बस याद रखें कि स्ट्रिंग मैनिपुलेशन की तुलना में डोम मैनिपुलेशन आमतौर पर काफी धीमा होता है।

इस प्रदर्शन की खाई का एक उदाहरण:

// 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 आप स्पष्टीकरण प्राप्त कर सकें।

Answer 3

शायद नहीं सबसे लोकप्रिय दृष्टिकोण।

बैकएंड में उत्पन्न एचटीएमएल कोड है। संवाद एक सीएसएस छुपा div में होगा। जब आप इसे "पॉप" करना चाहते हैं, तो बस अलग-अलग सीएसएस शैलियों को लागू करें और एक छुपा इनपुट मान बदलें (मुझे लगता है कि संवाद उस निश्चित तारीख के साथ इंटरैक्ट करता है)।