Question

我正在尝试在外部JavaScript文件中显示douter（我的外部div）但是当我点击我的HTML页面中的按钮时它没有显示。我想用外部div替换div显示我看到的唯一错误是：

[HTTP / 1.1 304未修改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位于root（不在另一个div内）

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

现在，如果你的显示div在另一个div中，那么你需要获得对包含displayDiv的div的引用。由于您没有发布更多HTML结构，我将发布一个快速示例。显然，您需要使其与您的代码一起使用。

我们假设这是你的结构：

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

然后你需要一个id为“someContainer”的div的引用来替换显示div：

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

如果您发布实际的HTML，我可以使其更具体，但实际上这应该足以让您获得所需的结果。

或者，使用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";

无法使用javascript显示div标签

2 个答案: