क्या एलेमेंटबीआईआईडी जावास्क्रिप्ट द्वारा बनाए गए तत्वों पर काम करता है?

Question

मैं अपने ब्लॉग का संग्रह अनुभाग में एक महीने के विस्तार देखा गया लोड करने के लिए दो कार्य बना लिया है, जब यह लिंक पर क्लिक किया जाता है:

// Load open view of a month in the Archive section 
function loadMonth(date) { 
    // Remove other open month 
    removeMonth(); 

    // Hide opening month's link 
    // Define variable to hold month anchor tag 
    var monthLink = document.getElementById(date); 
    monthLink.style.display = "none"; // Hide month anchor 

    // Define new open month node and its attributes 
    var openMonth = document.createElement("div"); 
    openMonth.setAttribute("id", "openMonth"); 
    openMonth.innerHTML = "Testing one, two, three."; 

    // Insert open month 
    // Define a variable to hold the archive Div node 
    var archive = document.getElementById("archive"); 
    // Insert the open month in the archive node before it's link 
    archive.insertBefore(openMonth,monthLink); 

    return; 
    } 


// Close full view of a month and replace with respective link 
function removeMonth() { 

    // Define global function vars 
    var archive = document.getElementById("archive"); // Define a var to hold the archive Div node 
    var openMonth = document.getElementById("openMonth"); // Define var to hold the open month Div node 

    // Get date of full view month for replacement anchor tag where ID = date 
    var month = openMonth.getElementsByTagName("span")[0].innerHTML; // Define var to hold the name of the open month 
    var date = (new Date(month + " 15, 2008").getMonth() + 1); // Define var to hold the numerical equivalent of the month 
    var year = archive.getElementsByTagName("h3")[0].innerHTML.split(" "); // Define var to hold the year being displayed in the archive 
    date = year[1] + "" + date; // Change date var to string and insert year 

    // Remove the open month 
    archive.removeChild(openMonth); 

    // Show Link for that month 
    document.getElementById(date).className = "big"; // Fixes display error when anchor has class firstLink 
    document.getElementById(date).style.display = "inline"; // Returns link from display "none" state 
    return; 
} 

फ़ंक्शन कार्य जब मूल स्थैतिक सामग्री पर चलने, लेकिन जब एक दूसरे लिंक संग्रह में क्लिक किया गया है, वे कुछ भी नहीं करते हैं। मैं सोच रहा हूं कि शायद इसलिए कि मेरे कार्यों द्वारा बनाए गए तत्वों को document.getElementById द्वारा नहीं बुलाया जा सकता है। शायद उन नोड्स तक पहुंचने का एक अलग तरीका इस्तेमाल किया जाना चाहिए, या हो सकता है कि "दस्तावेज़" को किसी ऐसे चीज़ से बदल दें जो जावास्क्रिप्ट पर बनाए गए तत्वों पर भी काम करता हो?

किसी भी सलाह की सराहना की जाएगी। धन्यवाद।

Answer 1

अपने मुख्य सवाल का जवाब करने के लिए: document.getElementByIdगतिशील रूप से जोड़ा तत्वों के साथ काम करता है।

अपने नमूना कोड में आप openMonth div बना रहे हैं और इसके आंतरिक HTML को सेट कर रहे हैं। फिर निकालें टैग में आप यह कर रहे हैं:

var month = openMonth.getElementsByTagName("span")[0].innerHTML; 

openMonth.getElementsByTagName("span") मौजूद नहीं होगा और क्योंकि वहाँ कोई स्पान तत्व हैं एक त्रुटि मिल जाएगा। मुझे नहीं पता कि यह कोड में एक गलती है या यदि यह पोस्ट में एक अपूर्ण नमूना है।

Answer 2

आप के साथ ठीक किया जाना चाहिए:

openMonth.id = "openMonth"; 

getElementById() केवल तभी तत्व डोम का हिस्सा है काम कर सकते हैं, लेकिन जब से आप पहले से ही insertBefore() का उपयोग इस महज एक पक्ष नोट है। एक विशेषता "आईडी" नाम दिया गया है जरूरी नहीं कि एक है कि अंतर्निहित DTD में तत्व आईडी के रूप में परिभाषित:

वहाँ भ्रम का एक आम स्रोत यहाँ शामिल है। घोषणात्मक एचटीएमएल में, वे स्वचालित रूप से जुड़े हुए हैं। जब आप setAttribute() का उपयोग करते हैं, तो आप नाम "आईडी" विशेषता बनाने से अधिक नहीं हैं। तत्व आईडी स्वयं .id संपत्ति के माध्यम से सुलभ है।

संपादित

मेरे लिए निम्नलिखित काम करता है:

function test() 
{ 
    // create element, set ID 
    var p = document.createElement("P"); 
    p.innerHTML = "Look ma, this is a new paragraph!"; 
    p.id = "newParagraph"; 

    // make element part of the DOM 
    document.getElementsByTagName("BODY")[0].appendChild(p); 

    // get element by ID 
    var test = document.getElementById("newParagraph"); 
    alert(test.innerHTML); 
} 

Answer 3

एक और विचार - आप विभिन्न तत्वों के लिए 'ओपनमोन्थ' आईडी का पुन: उपयोग कर रहे हैं, शायद यह एक समस्या है भले ही आप पहले तत्व को हटा दें।

आप आईडी के बजाय कक्षा का उपयोग करने का प्रयास कर सकते हैं, या आप 'वर्तमान माह तत्व' के साथ वैश्विक चर धारण कर सकते हैं।

Answer 4

यह केवल तभी काम करता है जब आप इसे बनाते समय तत्व के लिए आईडी निर्दिष्ट करते हैं। मुझे याद है जब मैं फ्लाई पर रचनात्मक तत्व था, मैं आईडी के लिए काउंटर सेट करता था या डेटा को डेटाबेस से पुनर्प्राप्त किया गया था, तो मैं इसके बजाय पंक्ति आईडी का उपयोग करूंगा।

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

आशा है कि