Unable to display div tag using javascript

Question

I am trying to display douter (my outer div) in the external JavaScript file but when I click on the button in my HTML page it does not show.i want to replace the div display with the outer div The only error that I see is this:

[HTTP/1.1 304 Not Modified 15ms]

Here's my HTML code:

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

... and here's my 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);    
}

I want to hide the display div and replace it with the outer div and its contents.

Welcome to Stack Overflow. I've fixed up the formatting in your post for you, but for future reference you can format your code by selecting your code then clicking the {} button, or indenting your code using 4 spaces. Thanks! — Qantas 94 Heavy
– Qantas 94 Heavy, Commented Feb 23, 2014 at 7:52

Manjesh V · Accepted Answer · 2014-02-23 07:56:48Z

1

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

I think you missed to append created elements to body

answered Feb 23, 2014 at 7:56

Manjesh V

1,25015 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3342712 Over a year ago

what should be done if the display div has to be replaced with outer div

Manjesh V Over a year ago

document.getElementById("display").remove(); you can remove old by this way.

user3342712 Over a year ago

want to replace that with the outer div, tried yours but same output

Dmitriy Khaykin · Accepted Answer · 2014-02-23 10:36:54Z

0

You append the children but never actually append douter to the document.

Add this code at the end of your function...

If you want to simply add the new div:

document.appendChild(douter);

If you want it to replace the display div:

This assumes that displayDiv is at root (not inside another div)

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

Now, if your display div is inside another div, then you need to get a reference to whatever div contains displayDiv. Since you didn't post more of your HTML structure, I'll post a quick example. Obviously you will need to make it work with your code.

Let's suppose this is your structure:

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

Then you need a reference to the div with id "someContainer" to replace the display div:

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

If you post your actual HTML I can make this more specific, but really this should give you enough to get your desired result.

Alternately, use style.display to show/hide two divs:

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";

edited Feb 23, 2014 at 10:36

answered Feb 23, 2014 at 7:58

Dmitriy Khaykin

5,2581 gold badge22 silver badges32 bronze badges

6 Comments

user3342712 Over a year ago

i want to hide the display div and only show the outer div and its contents @davidkhaykin

Dmitriy Khaykin Over a year ago

@user3342712: That is a good thing to post in your question for future reference. See my updated answer.

user3342712 Over a year ago

yeah i was looking out for this but it disappears and following error message is shown in the console TypeError: document.replaceChild.appendChild is not a function

Dmitriy Khaykin Over a year ago

@user3342712: That was a typo which I since fixed in my answer...it's just document.replaceChild(oldChild, newChild);

user3342712 Over a year ago

actually i need only a single div which should be replaced by another div i tried your code but it gives node not found

|

Collectives™ on Stack Overflow

Unable to display div tag using javascript

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related