如何使用Java脚本替换和隐藏Div内容

Question

您能帮我做一个javascript函数吗：（1）单击两个按钮时，在showarea中显示div内容；（2）如果showshow中包含show1 / show2的内容，则替换showarea中的内容；（3）隐藏内容。

场景：单击SUB按钮时，它将Show1的内容显示到ShowArea中，但是当单击DOM按钮时，它将替换ShowArea的内容Show1，并显示Show2的内容。 但是，当再次单击DOM按钮时，它将隐藏ShowArea及其边框。

这是示例代码：

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

这是我创建的两个函数。 replace函数替换内容，然后单击Open打开以显示或隐藏div。 但是replace（）仅适用于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"; 
}

谢谢

Answer 1

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