無法使用javascript顯示div標記

Question

我試圖在外部JavaScript文件中顯示douter（我的外部div），但是當我單擊HTML頁面中的按鈕時，它不顯示。我想用div替換div顯示外格，我看到的唯一錯誤是這樣的：

[HTTP/1.1 304 Not Modified 15ms]

這裏是我的HTML代碼：

<div id="display"> 
    <input type="button" id="button" value="Play Quiz" onclick="generator()"/> 
</div>      

...這是我的JavaScript：

function generator() { 
    button.style.display = "none"; 

    var douter = document.createElement("div");   
    douter.setAttribute("class", "douter");  
    douter.id = "douter"; 

    var dinner = document.createElement("div"); 
    dinner.setAttribute("class", "dinner");  
    dinner.id = "dinner"; 

    var btn = document.createElement("button");  
    btn.innerHTML = "Next"; 
    // document.getElementById("display").style.display = "none"; 

    var rad = document.createElement("input");  
    rad.setAttribute("type", "radio");  
    rad.setAttribute("name", "rad");  
    rad.setAttribute("id", "rad");  
    rad.setAttribute("value", "rad"); 
    // document.write(Questions.question.length); 

    douter.appendChild(dinner);  
    dinner.appendChild(rad);  
    dinner.appendChild(btn);  
} 

我想隱藏顯示div並將其替換爲外部div及其內容。

Answer 1

dinner.appendChild(btn); 
document.body.appendChild(douter); 
} 

我想你錯過追加創建的元素對身體

Answer 2

您可以附加的孩子，但實際上從未追加douter到文檔中。

在你的函數的末尾添加以下代碼...

如果你想簡單地添加新的div：如果您想要更換

document.appendChild(douter); 

顯示div：

這假定displayDiv在根（不在諾特爾格）

var displayDiv = document.getElementById('display'); 
document.replaceChild(displayDiv, douter); 

現在，如果你的顯示器的div是另一個DIV中，那麼你就需要去參考任何div包含displayDiv。既然你沒有發佈更多的HTML結構，我會發佈一個簡單的例子。顯然你需要使它與你的代碼一起工作。

讓我們假設這是你的結構：

<div id="someComtainer"> 
    <div id="display"> <!-- ... Content ... --> </div> 
</div> 

然後，你需要ID爲 「someContainer」 股利的基準更換顯示器的div：如果您發佈實際的HTML

var someContainer = document.getElementById('someContainer'); 
var displayDiv = document.getElementById('display'); 
someContainer.replaceChild(displayDiv, douter); 

我可以使這個更具體，但真的這應該足以讓你得到你想要的結果。

或者，使用的style.display顯示/隱藏兩個div：

HTML：

<div id="message" style="display:none;"></div> 
<div id="display"> <!-- ... Content ... --> </div> 

JS：

var messageDiv = document.getElementById('message'); 
var displayDiv = document.getElementById('display'); 

messageDiv.appendChild(displayDiv, douter); 

messageDiv.style.display = "block"; 
displayDiv.style.display = "none";