How to Replace and Hide Div Contents Using Javascript

Question

Can you help me to make a javascript function to: (1) show div contents in showarea when the two buttons are clicked, (2) replace content in the showarea if it contains show1/show2 (3) hide the content.

Scenario: When the button SUB button is clicked, it'll show Show1's contents to the ShowArea, but when the DOM button is clicked, it'll replace the contents of ShowArea which is Show1 and display the contents of Show2. But when you click again the DOM button, it will now hide the ShowArea and it's border.

Here is the sample code:

<div id="credentials">
  <div id="user">
    <button id="button" type="button" onclick="Open('Show1');">SUB</button> 
    <br>
    <button type="button" onclick="replace('Show1','Show2')">DOM</button>
  </div>
</div>

<div id="showarea" style="border: 2px solid #365278">
  <div id="studentlogin">
    <div id = "Show1">
        <form name="form" method="get" action="studenthome.html" onclick="replace()" onsubmit="return validateStudent(this)">
            Enter your ID NUMBER<br><input type="text" name="student" id="studentID" /><br>
            <input type="submit" value="Log-in" >       
        </form>
    </div>
  </div>

<div id="facultylogin">
<div id = "Show2">
<form name="form" method="get" action="facultyhome.html" onclick="replace()" onsubmit="return validateFaculty(this)">
Enter your FACULTY ID <br><input type="text" name="faculty" id="facultyID" /><br>
<input type="submit" value="Log-in" >   
</form>

</div>
</div>  
</div>
</div>

These two functions is what I've created. replace function to replace the content and Open to show or hide the div. but the replace() only works for the DOM..

function replace(id,content) { 
var container = document.getElementById(id); 
container.innerHTML = content; 
} 
function Open(idMyDiv){ 
var objDiv = document.getElementById(idMyDiv); 
if(objDiv.style.display == "inline"){ 
objDiv.style.display = "none"; 
} else { 
objDiv.style.display = "inline"; 
}

Thanks

Answer 1

我假设这是“作业分配”，因此仅提示：Node.replaceChild（）如果您使用的是jQuery之类的库：jQuery.replaceWith（）