डीओएम में एचटीएमएल कोड जोड़ने के दो तरीके हैं और मुझे नहीं पता कि ऐसा करने का सबसे अच्छा तरीका क्या है।क्या आप आंतरिक HTML का उपयोग करके या नए तत्वों को एक-एक करके बनाकर डीओएम में HTML जोड़ना चाहिए?
सबसे पहले विधि
पहला रास्ता आसान एक है, मैं बस (jQuery के साथ) एचटीएमएल कोड $('[code here]').appendTo(element); का उपयोग कर element.innerHTML = [code here]; बहुत पसंद
दूसरी विधि है जो जोड़ सकता है
एक और तरीका सभी तत्वों को एक-एक करके बनाना है:
// New div-element
var div = $('<div/>', {
id: 'someID',
class: 'someClassname'
});
// New p-element that appends to the previous div-element
$('<p/>', {
class: 'anotherClassname',
text: 'Some textnode',
}).appendTo(div);
यह विधि document.createElement और element.setAttribute जैसे मूल कार्यों का उपयोग करती है।
मुझे पहली विधि का उपयोग कब करना चाहिए और दूसरा कब? विधि विधि से दो तेज है? -
संपादित speed tests
मैं जहाँ से कोड इस प्रकार तीन गति परीक्षण किया था के परिणाम:
$(document).ready(function(){
// jQuery method - Above mentioned as the second method
$('#test_one').click(function(){
startTimer();
var inhere = $('#inhere');
for(i=0; i<1000; i++){
$(inhere).append($('<p/>', {'class': 'anotherClassname' + i, text: 'number' + i}));
}
endTimer();
return false;
});
// I thought this was much like the jQuery method, but it was not, as mentioned in the comments
$('#test_two').click(function(){
startTimer();
var inhere = document.getElementById('inhere');
for(i=0; i<1000; i++){
var el = document.createElement('p')
el.setAttribute('class', 'anotherClassname' + i);
el.appendChild(document.createTextNode('number' + i));
inhere.appendChild(el);
}
endTimer();
return false;
});
// This is the innerHTML method
$('#test_three').click(function(){
startTimer();
var inhere = document.getElementById('inhere'), el;
for(i=0; i<1000; i++){
el += '<p class="anotherClassname' + i + '">number' + i + '</p>';
}
inhere.innerHTML = el;
endTimer();
return false;
});
});
कौन दे दी है निम्नलिखित वास्तव में आश्चर्य की बात परिणाम
Test One Test Two Test Three
+-------------+---------+----------+------------+
| Chrome 5 | ~125ms | ~10ms | ~15ms |
| Firefox 3.6 | ~365ms | ~35ms | ~23ms |
| IE 8 | ~828ms | ~125ms | ~15ms |
+-------------+---------+----------+------------+
कुल मिलाकर आंतरिक HTML विधि सबसे तेज़ प्रतीत होती है और कई मामलों में सबसे अधिक पढ़ने योग्य है।
गति केवल चिंता नहीं है ... कई बार, 'पहली विधि' जैसी लिखी गई कोड 'दूसरी विधि' से असीम रूप से अधिक पठनीय होगी। –