जावास्क्रिप्ट (appendChild)

Question

का उपयोग करके डोम में नए तत्व जोड़ना मुझे कभी-कभी मौजूदा HTML पृष्ठ पर तत्व जोड़ने (जैसे एक नया लिंक और छवि) जोड़ने की आवश्यकता होती है, लेकिन मेरे पास केवल पृष्ठ के एक छोटे से हिस्से तक पहुंच है जहां से मैं तत्वों को सम्मिलित करने की आवश्यकता है। मैं डीओएम आधारित जावास्क्रिप्ट तकनीकों का उपयोग करना चाहता हूं, और मुझे document.write() का उपयोग करने से बचना चाहिए।

// Create new image element 
var newImg = document.createElement("img"); 
    newImg.src = "images/button.jpg"; 
    newImg.height = "50"; 
    newImg.width = "150"; 
    newImg.alt = "Click Me"; 
// Create new link element 
var newLink = document.createElement("a"); 
    newLink.href = "/dir/signup.html"; 
// Append new image into new link 
newLink.appendChild(newImg); 
// Append new link (with image) into its destination on the page 
document.getElementById("newLinkDestination").appendChild(newLink); 

वहाँ एक और अधिक कारगर तरीका है कि मैं एक ही बात को पूरा करने का उपयोग कर सकते है:

प्रकार अब तक, मैं कुछ इस तरह का उपयोग कर रहा है? यह सब जरूरी लगता है, लेकिन मैं जानना चाहता हूं कि क्या ऐसा करने का एक बेहतर तरीका है।

Answer 1

एक और अधिक प्रभावी तरीका है, और यदि संभव हो तो दस्तावेज का उपयोग करना प्रतीत होता है। इसे देखें: http://ejohn.org/blog/dom-documentfragments/। इसके अलावा इस तरह से बहुत कम त्रुटि प्रवण होना चाहिए और विशाल स्ट्रिंग्स को मिलाकर शुरू करना और उन्हें अन्य डीओएम ऑब्जेक्ट्स के आंतरिक HTML के रूप में सेट करना प्रारंभ करना चाहिए।

Answer 2

इसके साथ कुछ भी गलत नहीं है। innerHTML का उपयोग करना थोड़ा तेज़ और शायद कम वर्ण होगा लेकिन इस पैमाने के कुछ के लिए ध्यान देने योग्य नहीं है, और मेरी व्यक्तिगत वरीयता अधिक मानक, समान रूप से समर्थित और सुरक्षित डोम विधियों और गुणों के लिए है।

एक मामूली बिंदु: height और width<img> तत्वों के गुण तारों की बजाय संख्याएं होनी चाहिए।

Answer 3

यदि आप कई चीजें नहीं जोड़ रहे हैं, तो जिस तरह से आप इसे कर रहे हैं वह आदर्श बनाम आंतरिक HTML है। यदि आप इसे अक्सर कर रहे हैं, तो आप केवल एक सामान्य फ़ंक्शन/ऑब्जेक्ट बना सकते हैं जो उचित जानकारी को पैरामीटर के रूप में लेता है और गंदे काम करता है। आईई

function addImage(src,width,height,alt,appendElem,href) {...} 

मैं अक्सर समय बचाने के लिए प्रोटोटाइप का उपयोग करके अपनी परियोजनाओं में ऐसा करता हूं।

Answer 4

बस सावधान रहें, innerHTML गैर-मानक और कुख्यात दोनों buggy दोनों हैं।