在JS中找不到DIV

我正在創建一個web頁面，我需要通過ID獲取元素，但是當我嘗試這樣做時，返回的元素是一個空對象。我認爲，因爲我想要得到的div是在HTML代碼中添加的，當我按下按鈕，但我的JS代碼是在頁面加載時編譯的，所以JS無法找到div ...我怎樣才能選擇我的div與JS？在JS中找不到DIV

<html><head><script> 
function getDiv(){ 
    var div = document.getElementById('div_name'); 
    div.innerHTML = "SOMETHING"; //div is null 
    //<div id="div_name"></div> isn't added when the page is loaded 
} 
function addDiv() 
{ 
    var iDiv = document.createElement('div'); 
    iDiv.id = 'div_name'; 
    document.getElementsByTagName('body')[0].appendChild(iDiv); 
} 
</script></head> 
<body> 
<button onClick="getDiv()">GETDIV</button> 
<!-- Pretend that with this button I add the div with 'div_name' in my HTML 
page --> 
<button onClick="addDiv()">ADDDIV</button> 
</body></html>

來源

2017-06-20 AleConti99

您是否觸發該功能？例如點擊？ – Alex

嘗試將腳本即函數getDIv調用放在頁面的底部。你還會考慮使用jQuery框架嗎？另外，你能顯示一部分相關的HTML嗎？ – Adder

你的意思是？我點擊一個按鈕時調用函數 – AleConti99

請參閱下面的代碼： -

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <script> 
 

 
function addDiv(){ 
 
    var div = document.getElementById('div_name'); 
 
    var isDivPresent = (div && (div !== null)); 
 

 
    if(isDivPresent){ 
 
    \t return; 
 
    } 
 

 
\t var createDiv = document.createElement("div"); 
 
\t createDiv.setAttribute("id", "div_name"); 
 
\t createDiv.style.backgroundColor = "lightblue"; 
 
\t createDiv.style.width='250px'; 
 
\t createDiv.style.height='300px'; 
 

 

 
\t document.getElementsByTagName('body')[0].appendChild(createDiv); 
 
} 
 

 
function getDiv(){ 
 
    var div = document.getElementById('div_name'); 
 
    var isDivPresent = (div && (div !== null)); 
 
    
 
    if(!isDivPresent) { 
 
     addDiv(); 
 
     getDiv(); 
 
    }else { 
 
     \t div.innerHTML = "SOMETHING"; 
 
    }  
 
} 
 

 
</script> 
 
</head> 
 
<body> 
 

 

 
<button onClick="addDiv()">ADDDIV</button> 
 

 
<button onClick="getDiv()">GETDIV</button> 
 

 

 

 
</body> 
 
</html>

來源

2017-06-20 07:08:23 MiHawk

該div沒有直接加載到HTML代碼中 – AleConti99

@ AleConti99： - 所以你首先想要添加一個div使用按鈕點擊，然後getDiv按鈕點擊？ – MiHawk

@ AleConti99： - 如果有用，請接受我的回答。 – MiHawk

function getDiv(){ 
 
    var div = document.getElementById('div_name'); 
 
    div.innerHTML = "SOMETHING"; //div is null 
 
} 
 

 
function addDiv(){ 
 
    if(!document.getElementById('div_name')){ 
 
    var div = document.createElement("div"); 
 
    div.id = 'div_name'; 
 
    div.innerHTML = "Added Through add div"; 
 
    document.body.appendChild(div); 
 
    } 
 
}

<button onClick="getDiv()">GETDIV</button> 
 
<button onClick="addDiv()">ADDDIV</button>

來源

2017-06-20 07:22:04

這裏是你嘩嘩一個可行的代碼。主要的區別是：

我用onclick作爲屬性名稱，而不是onClick

function addDiv() { 
 
\t \t \t var div = document.createElement('div'); 
 
\t \t \t div.id = 'div_name'; 
 
\t \t \t document.body.appendChild(div); 
 
\t \t \t div.innerHTML = 'initial content'; 
 
\t \t } 
 

 
\t \t function updateDiv() { 
 
\t \t \t var div = document.getElementById('div_name'); 
 
\t \t \t div.innerHTML = 'new content'; 
 
\t \t }

<!DOCTYPE html> 
 
<html> 
 
\t <head></head> 
 
\t <body> 
 

 
\t \t <button onclick="addDiv();">add div</button> 
 

 
\t \t <button onclick="updateDiv();">replace div content</button> 
 
\t </body> 
 
</html>

來源

2017-06-20 07:25:36 Dexter0015

如果單擊GETDIV按鈕而不點擊ADDDIV按鈕，然後再在DIV你重新尋找並不在文檔體中的任何地方。所以我會改變getDiv()像這樣：

function getDiv(){ 
    var div = document.getElementById('div_name'); 
    if(!div) { // if div is not added yet, then add it 
     addDiv(); 
    } 
    div.innerHTML = "SOMETHING"; //div is null 
}

來源

2017-06-20 07:32:49 vassiliskrikonis

在JS中找不到DIV

回答

相關問題