Replacing a DIV?

Question

I need to replace a div with another div, I have no idea how to do this?? Is there a way to place a div on top of another div and then just make the one transparent?

Answer 1

Easy. No need for a framework/library.

parentNode.replaceChild(newNode, oldNode);

If you only have the newNode and the oldNode:

oldNode.parentNode.replaceChild(newNode, oldNode);

Answer 2

If you need to replace the content of a div with the content of another div you can just go for

document.getElementById('div1').innerHTML = ...

Otherwise if you need to replace the entire div, you may want to use a parent div that contains the one you want to substitute and use the parent property.

If you need further help please add code.

Answer 3

Use replaceChild() (see an example)

Answer 4

yes ofcourse there is a way to place a div on each other... you can do it by setting the z-index property of the element.. this can b done by.. and setting z-index of another higher than first one... then according to need you can give id to each div and make them visible or hidden.....

Answer 5

Hey Cinimozda , Use this div property to play hide and seek game for the particular div. I hope this work for you. Copy and paste the whole code and try at your local computer.

<html>
<head>
    <style type="text/css">
    .divStyle {
    width:200px;
    height:100px;
    margin:0px auto;
    }
    </style> 

<script language="javascript" type="text/javascript">
    function displayDiv(){
        var divstyle = new String();
        divstyle = document.getElementById("div1").style.display;
        if(divstyle.toLowerCase()=="block" || divstyle == ""){
            document.getElementById("div1").style.display = "none";
            document.getElementById("div2").style.display = "block";
        }
        else{
            document.getElementById("div1").style.display = "block";
            document.getElementById("div2").style.display = "none";

        }
    }
    </script>
</head>
<body>
    <div id="div1" class="divStyle">Div One One One One 
    </div>
  <div id="div2" class="divStyle" style="display:none;">Div Two Two Two Two Two
    </div>   
    <center>
        <input type="button" value="display Div" onclick="displayDiv()" />
    </center>
</body>
</html>

All The Best !!!