jQuery

Question

के साथ डोम तत्व जोड़ने का सबसे अच्छा तरीका इसलिए मैंने पृष्ठ पर HTML/DOM तत्व जोड़ने के तीन तरीके देखे हैं। मैं उत्सुक हूं कि उनमें से प्रत्येक के लिए पेशेवर और विपक्ष क्या हैं।

1 - पारंपरिक जावास्क्रिप्ट

मैं इसे, प्रत्येक तत्व का निर्माण विशेषताएं सेट, और फिर उन्हें जोड़कर है ऐसा करने के लिए सीधे जे एस रास्ता विश्वास करते हैं। उदाहरण:

var myRow = document.createElement("tr"); 
myRow.class = "myClass"; 

var firstTD = document.createElement("td"); 
firstTD.innerHTML = "first"; 
myRow.appendChild(firstTD); 

var secondTD = document.createElement("td"); 
secondTD.innerHTML = "second"; 
myRow.appendChild(secondTD); 

document.getElementById("myContainer").appendChild(myRow); 

2 - jQuery

के माध्यम से एचटीएमएल के एक स्ट्रिंग जोड़ मैंने देखा है कि सबसे jQuery उदाहरण मैं देख रहा हूँ बस एचटीएमएल के एक स्ट्रिंग आम तौर पर जोड़ देते हैं।
उदाहरण:

$("#myContainer").append('<tr class="myClass"><td>first</td><td>second</td></tr>'); 

3 - jQuery में jQuery के .clone()

मैं भी देखा है का उपयोग करता है और संदर्भ के एक बहुत .clone लिए()।
उदाहरण:

$("#myContainer").append($(".myClass").Clone()); 

मैं सुनने के लिए दूसरों को क्या इस बारे में कहना है अच्छा लगेगा।

(इसके अलावा, यह एक 'समुदाय विकी' के लिए एक अच्छे उम्मीदवार की तरह लगता है, लेकिन मैं उनके साथ भी परिचित नहीं हूँ। कोई टिप्पणी करेंगे और जाने मुझे पता है अगर यह होना चाहिए? धन्यवाद)

Answer 1

आप jQuery 1.4 सबसे अच्छा तरीका उपयोग कर रहे हैं निम्नलिखित है:

$("<a/>", { 
    id: 'example-link', 
    href: 'http://www.example.com/', 
    text: 'Example Page' 
}).appendTo("body"); 

Answer 2

करने के लिए क्लीनर तरीका jQuery का उपयोग कर रहा है।

$('tr').addClass('myClass') वाक्यविन्यास की तरह। यह पढ़ने, समझने और बनाए रखने में आसान है।

Answer 3

यदि आपके पास पहले से ही jQuery उपलब्ध है, तो इसका उपयोग करें। यदि आप इसे होस्ट नहीं करना चाहते हैं, तो Google के होस्ट किए गए संस्करण का उपयोग करें। अंत में यह हमेशा मूल जावास्क्रिप्ट createElement या आंतरिक HTML विधियों को बुला रहा है। इसलिए यदि मैं विशेष रूप से पृष्ठ पर किसी मौजूदा तत्व को क्लोन करना चाहता हूं तो मैं # 2 और # 3 का उपयोग करूंगा।

Answer 4

आप पहले से ही एक टेम्पलेट तत्व यह है कि है तो उन्हें कॉपी करने से हर तरह क्लोन का उपयोग करना चाहते है, तो()।

1. वस्तुओं (उदाहरण के लिए createElement का प्रयोग करके) के रूप में डोम तत्वों बनाएँ:

   लेकिन फिर वहाँ मूल रूप से दो तरीकों से मुझे लगता है कि आप alluded करने के लिए आप स्क्रैच से एक तत्व बनाना चाहते हैं।

2. एचओएम तत्वों को HTML के रूप में बनाएं (उदाहरण के लिए आंतरिक HTML या jQuery के HTML() का उपयोग करके)।

सबसे पहले यदि विधियों में से कोई भी आपके लिए लिखने के लिए अधिक सहज या आसान है, तो मैं बस ऐसा करने की अनुशंसा करता हूं।

अन्यथा बाद वाले का उपयोग करने के लाभ यह है कि यदि तत्व में कई बच्चे हैं तो यह क्लीनर है।उदाहरण के लिए, पहली कॉल का उपयोग करके एक अलग वर्ग के साथ 6 कॉलम के साथ एक टेबल पंक्ति बनाने का प्रयास करें। यदि आप दूसरी विधि का उपयोग करते हैं तो आपका कोड बहुत लंबा होगा।

जहां तक ​​प्रदर्शन चलता है यह एक अच्छी गाइड http://andrew.hedges.name/experiments/innerhtml/ है लेकिन ज्यादातर मामलों के लिए संक्षिप्त जवाब काफी नगण्य है। सामान्य रूप से प्रदर्शन के लिए एक अच्छी मार्गदर्शिका भी है: http://www.artzstudio.com/2009/04/jquery-performance-rules/। 6 वें टिप को डीओएम हेरफेर के साथ करना है। http://api.jquery.com/jQuery.template/ जो अंतिम है, लेकिन कुछ बेहतर से बदल दिया जाएगा:

Answer 5

आप HTML की बड़ी मात्रा के साथ काम कर रहे हैं आप पुन: उपयोग करने के लिए तो मैं सुझाव देंगे अपने आप को देखो चाहते हैं।

मैं इसे उत्पादन वातावरण में उपयोग करता हूं और यह बहुत अच्छा है, क्योंकि एचटीएमएल के छोटे टुकड़े क्या स्प। सईद का सबसे अच्छा तरीका

Answer 6

क्लोन मौजूदा सामग्री है ...

var $html = $template.clone();

 $html.find(''); ///after change content...

क्लोन सामग्री की वजह से 'डोम' गुणों के साथ है। फिर आप इस टैग, गुण, मूल्य को बदल सकते हैं और इसे जोड़ सकते हैं ..