GetElementById có hoạt động trên các phần tử được tạo bởi javascript không?

Question

tôi đã tạo ra hai chức năng để tải quan điểm mở rộng của một tháng trong phần lưu trữ blog của tôi khi đó là liên kết được nhấp:

// 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; 
} 

Các chức năng hoạt động khi chạy trên nội dung tĩnh ban đầu, nhưng khi một giây liên kết được nhấp vào trong kho lưu trữ, chúng không làm gì cả. Tôi tự hỏi liệu có lẽ vì các phần tử được tạo bởi các hàm của tôi không thể được gọi bởi document.getElementById. Có lẽ một phương pháp khác nhau để truy cập các nút đó nên được sử dụng, hoặc có thể thay thế "tài liệu" bằng một cái gì đó hoạt động trên các phần tử tạo javascript?

Mọi lời khuyên sẽ được đánh giá cao. Cảm ơn.

Answer 1

Để trả lời câu hỏi chính của bạn: document.getElementByIdkhông làm việc với các yếu tố năng động nhất.

Trong mã mẫu của bạn, bạn đang tạo div openMonth và thiết lập innerHTML của nó. Sau đó, trong thẻ xóa, bạn đang thực hiện việc này:

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

openMonth.getElementsByTagName("span") sẽ không tồn tại và sẽ gặp lỗi vì không có yếu tố nhịp. Tôi không biết nếu đây là một sai lầm trong mã hoặc nếu nó chỉ là một mẫu không đầy đủ trong bài viết.

Answer 2

Bạn nên sử dụng tốt với:

openMonth.id = "openMonth"; 

getElementById() chỉ có thể có tác dụng nếu phần tử là một phần của DOM, nhưng kể từ khi bạn đã sử dụng insertBefore() này chỉ đơn thuần là một mặt lưu ý.

Có một nguồn chung của sự nhầm lẫn liên quan ở đây: Thuộc tính tên "id" không nhất thiết phải là một trong đó là định nghĩa như ID phần tử trong DTD tiềm ẩn. Trong HTML khai báo, chúng được liên kết tự động. Khi bạn sử dụng setAttribute(), bạn không được tạo nhiều thuộc tính có tên là "id". Bản thân ID phần tử có thể truy cập được qua thuộc tính .id.

Sửa

Các công trình sau đây cho tôi:

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

Một ý tưởng khác - bạn đang sử dụng lại id 'openMonth' cho các phần tử khác nhau, có thể đó là vấn đề ngay cả khi bạn xóa phần tử trước đó trước.

Bạn có thể thử sử dụng lớp thay vì id hoặc bạn có thể giữ biến toàn cục với 'yếu tố tháng hiện tại'.

Answer 4

Chỉ hoạt động nếu bạn chỉ định id cho phần tử khi tạo phần tử đó. Tôi nhớ khi tôi đã được creatin yếu tố trên bay tôi sẽ thiết lập một truy cập cho id hoặc nếu dữ liệu được lấy từ một cơ sở dữ liệu tôi sẽ sử dụng id hàng thay thế.

Tôi sẽ tạo phần tử bằng trường innerHTML của phần tử và chèn phần tử dưới dạng văn bản, sau đó công cụ hiển thị sẽ lấy nó từ đó. Nó không phải là cách tốt nhất để làm điều này nhưng nó rất nhanh, bạn đang ở trong một số vội vàng ...

Hy vọng rằng đã giúp