getElementById Trong đó Element được tạo động trong thời gian chạy

Question

Tôi đã tạo một đối tượng tại thời gian chạy bằng cách sử dụng thẻ innerHTML, bây giờ tôi muốn truy cập phần tử này bằng cách sử dụng getElementById, khi tôi truy cập phần tử giá trị NULL trả về của nó. Vui lòng đề nghị cho tôi bất kỳ hướng để tôi có thể đạt được điều này,

Dưới đây là gợi ý mã sau đây mà tôi đang sử dụng

Trong HTML

<div id="web"> 
<object id="test"></object> 
</div> 

Trong JS

document.getElementById("web").innerHTML="<object id='test2'></object>"; 
. 
. 
var obj = document.getElementById("test2"); 

Đây obj trả về giá trị null.

Answer 1

Bạn đã chỉ định id cho phần tử mới được tạo chưa? Bạn đã chèn phần tử vào cây tài liệu chưa (sử dụng appendChild hoặc insertBefore)? Miễn là phần tử không được chèn vào DOM, bạn không thể truy xuất phần tử đó bằng cách sử dụng document.getElementById.

Ví dụ về việc tạo ra yếu tố:

var myDiv = document.createElement('div'); 
myDiv.id = 'myDiv'; 
document.body.appendChild(myDiv); 
document.getElementById('myDiv').innerHTML = 'this should have worked...'; 

[chỉnh sửa] Với mã đã cung cấp sau đó, một câu hỏi thứ ba xuất hiện: là kịch bản của bạn nằm ở dưới cùng của trang html của bạn (ngay trước thẻ đóng </body>)? Nếu nó nằm trong tiêu đề của tài liệu, tập lệnh của bạn có thể đang chạy trước khi cây tài liệu được hiển thị hoàn toàn. Nếu kịch bản của bạn phải trong tiêu đề của tài liệu, bạn có thể sử dụng một bộ xử lý tải để chạy nó sau rendering của tài liệu:

window.onload = function(){ 
    document.getElementById("web").innerHTML='<object id="test2"></object>'; 
    // [...] 
    var obj = document.getElementById('test2'); 
}; 

Answer 2

Để thêm một yếu tố sử dụng JavaScript, bạn cần phải làm 2 việc .

1. Tạo các yếu tố

   var element = document.createElement (tagname);

2. Thêm nó vào dom

   document.body.insertBefore (selector, phần tử);

hoặc

document.getElementByID(selector).appendChild(element); 

Thông tin thêm ở đây: MDN

Answer 3

Nếu một nút DOM là tự động tạo ra, sau đó không cần bao giờ hết để tìm thấy nó một lần nữa với document.getElementById().

Bằng cách tạo nút đúng cách, bạn có thể giữ tham chiếu đến nút đó dưới dạng biến javascript, có thể được sử dụng ở bất kỳ đâu trong phạm vi.

Ví dụ:

window.onload = function(){ 
    var myDiv = document.createElement('div'); 
    document.body.appendChild(myDiv); 

    //and now a function that's called in response to some future event 
    function whatever(){ 
     ... 
     myDiv.style.color = 'red'; 
     ... 
    } 
}; 

Lưu ý: Chức năng bên trong (gọi tại một số điểm (s) trong tương lai) có quyền truy cập vào biến myDiv vì chức năng bên ngoài tạo thành một "đóng cửa", trong đó các biến được lưu giữ sống và dễ tiếp cận, mặc dù chức năng bên ngoài đã hoàn thành và trả về.