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

How to replace bunch of tags with JavaScript or jQuery?

本文关键字：一堆 标签 替换 何用 JavaScript jQuery      更新时间：2023-09-26

我在这个标签中有一个"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>

但只有当我更改文本而不是替换标签时，这才有效。谢谢你的帮助。

另一个想法可能是将#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();
 }
}

您也可以将菜单放在一个文件中，例如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");

顺便说一句，您可以对ULelment执行同样的操作，而不是整个aside元素，但更改aside更好，因为如果不更改，您的id（例如*#side_enu_div*）将不是一个很好的参考。

相关文章：