如何用JavaScript或jQuery替换一堆标签？

Question

我在此标签中有一个“ aside”标签，而我有一个“ div”，其中包含类似侧面菜单的内容。 我希望此菜单仅在用户登录时才显示。如果不是，我希望在那里显示而不是菜单中的登录表单。 我知道如何通过JavaScript检查是否建立了php会话，但是我不知道如何用其他代码替换所有代码。 这是一个代码：

<aside id="main_section_right">
    <div id="side_menu_div">
        <ul id="account_menu">
            <li class="current"><a href="#">Account</a></li>
            <li><a href="#">Edit Account</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Help</a></li>
            <li><a href="#">Log Out</a></li>
        </ul>
    </div>
</aside>

现在，如果用户未登录，我希望将“ ul”标签中的代码更改为此。

<form>
    <li><input type="text" class="form" id="username" name="usr"/></li>
    <li><input type="text" class="form" id="password" name="paw"/></li>
    <li>
        <button type="submit" class="login_button" id="login_button">
            <b>Login</b>
        </button>
    </li>
</form>

有什么方法可以使用jQuery或JavaScript吗？ 因此，总起来看起来像这样：

<script type="text/javascript">
    if (logged_in) {
        document.getElementById("side_menu_div").innerHTML = 
    } else {
        document.getElementById("side_menu_div").innerHTML =
    }
</script>

但这仅在我更改文本而不替换标签时才有效。 好，谢谢您的帮助。

Answer 1

另一个想法可能是合并#side_menu_div的两个元素，并根据登录状态切换它们的可见性。 看到这个jsfiddle

<div id="side_menu_div">
  <div id="loggedin">
   <ul id="account_menu">
     <li class="current"><a href="#">Account</a></li>
     <li><a href="#">Edit Account</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Help</a></li>
     <li><a href="#">Log Out</a></li>
   </ul>
  </div>
  <div id="notloggedid" class="chklogin">
   <form>
    <ul>
     <li><input type="text" class="form" id="username" name="usr"/></li>
     <li><input type="text" class="form" id="password" name="paw"/></li>
     <li><button type="submit" class="login_button" id="login_button">
                     <b>Login</b></button></li>
     </ul>  
   </form>
  </div>
</div>

切换显示功能：

function _setMenu(loginstatus){
 if (loginstatus){
    $('#loggedin').show();
    $('#notloggedin').hide();
 } else {
    $('#loggedin').hide();
    $('#notloggedin').show();
 }
}

Answer 2

您也可以将菜单包含在一个文件中，例如menu.html ，并将表单包含在其他文件form.html中 。

var isLogged; // This variable shoud be a boolean indicating if the user is logged

if (isLogged) $("#main_section_right").load("menu.html");
else          $("#main_section_right").load("form.html");

顺便说一句，您可以对UL元素而不是整个aside元素执行相同的操作，但是更改aside更好，因为如果您的ID（例如*＃side_menu_div *）不是很好的参考，那么。