<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery Test</title>
<script src="[http://libs.baidu.com/jquery/2.0.0/jquery.min.js](http://libs.baidu.com/jquery/2.0.0/jquery.min.js)"></script>
<script type="text/javascript">
$(document).ready(function() {
//点击button内容切换
$("button").click(function() {
$("p#login").toggle();
$("p#logout").toggle();
});
//点击p内容切换
$("p").click(function() {
$("p#login").toggle();
$("p#logout").toggle();
});
});
</script>
</head>
<body>
<div>
<h5>“登录/退出”切换</h5>
<hr />
<button type="button">切换</button>
<p id="login">登录</p>
<p id="logout" hidden="Ture">退出</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery Test</title>
<script src="[http://libs.baidu.com/jquery/2.0.0/jquery.min.js](http://libs.baidu.com/jquery/2.0.0/jquery.min.js)"></script>
<script type="text/javascript">
$(document).ready(function() {
//点击button内容切换
$("button#login").click(function() {
$('.container').append('<button type="button" id="logout">退出</button>');
$('button#login').remove();
});
$("button#logout").click(function() {
$('.container').append('<button type="button" id="login">登录</button>');
$('button#logout').remove();
});
});
</script>
</head>
<body>
<div class="container">
<h5>“登录/退出”切换</h5>
<hr />
<button type="button" id="login">登录</button>
</div>
</body>
</html>
上面这段代码想通过添加元素的方式进行切换；
但执行的结果不成功；
jQuery难道只能对原来存在的HTML代码进行操作吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery Test</title>
<script src="[http://libs.baidu.com/jquery/2.0.0/jquery.min.js](http://libs.baidu.com/jquery/2.0.0/jquery.min.js)"></script>
<script type="text/javascript">
$(document).ready(function() {
//点击button内容切换
$("button").click(function() {
$("button#login").toggle();
$("button#logout").toggle();
});
});
</script>
</head>
<body>
<div class="container">
<h5>“登录/退出”切换</h5>
<hr />
<button type="button" id="login">登录</button>
<button type="button" id="logout" hidden="True">退出</button>
</div>
</body>
</html>
修改后的这段代码实现了按钮的切换；
