使用 JavaScript 删除和添加新的 HTML 标签?
javascriptweb developmentobject oriented programming
要删除和添加新的 HTML 标签,请使用 hide() 和 show() 的概念。
假设以下是我们的按钮 −
<button type="submit" id="hide">单击我以隐藏上述内容 </button> <button type="submit" id="show">单击我以显示上述内容 </button>
要删除和添加按钮点击标签,请使用 hie() 和 show() −
$(document).ready(function(){ $("#hide").click(function(){ $("h1").hide(); }); $("#show").click(function(){ $("h1").show(); }); });
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>Document</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <h1>测试 JavaScript</h1> <button type="submit" id="hide">点击我隐藏以上内容 </button> <button type="submit" id="show">点击我显示以上内容 </button> <script> $(document).ready(function(){ $("#hide").click(function(){ $("h1").hide(); }); $("#show").click(function(){ $("h1").show(); }); }); </script> </body> </html>
要运行上述程序,请保存文件名"anyName.html(index.html)",然后右键单击该文件。选择选项"使用 Live Server 打开"在 VS Code 编辑器中。
输出
将产生以下输出 −
案例 1
当您点击按钮"点击我隐藏以上内容"时,您将获得以下输出。
案例 2
当您点击按钮“点击我以显示以上内容”,你将获得以下输出。