js——操作标签3——课表

最新推荐文章于 2024-07-28 21:34:00 发布

幸运的左右

最新推荐文章于 2024-07-28 21:34:00 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

分类专栏： RIA

本文链接：https://blog.youkuaiyun.com/love_xxxooo/article/details/79362631

RIA 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用JavaScript动态向页面中添加并移除按钮的示例。通过简单的HTML结构配合JavaScript函数，可以实现根据用户操作动态展示不同科目的按钮，并允许用户移除这些按钮。此示例适用于初学者理解DOM操作的基本概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <link href="css/new_file.css" rel="stylesheet" type="text/css" />
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript">
           function addtiyu(){
               var xx = document.createElement("input");
               xx.setAttribute("type","button");
               xx.setAttribute("value","体育");
               xx.setAttribute("onclick","removeT()");
               xx.setAttribute("id","tiyu");
               document.getElementById("div").appendChild(xx);
           }
           function addyingyu(){
               var xx = document.createElement("input");
               xx.setAttribute("type","button");
               xx.setAttribute("value","英语");
               xx.setAttribute("onclick","removeYY()");
               xx.setAttribute("id","yingyu");
               document.getElementById("div").appendChild(xx);
           }
           function addshuxue(){
               var xx = document.createElement("input");
               xx.setAttribute("type","button");
               xx.setAttribute("value","数学");
               xx.setAttribute("onclick","removeS()");
               xx.setAttribute("id","shuxue");
               document.getElementById("div").appendChild(xx);
           }
           function addmeishu(){
               var xx = document.createElement("input");
               xx.setAttribute("type","button");
               xx.setAttribute("value","美术");
               xx.setAttribute("onclick","removeM()");
               xx.setAttribute("id","meishu");
               document.getElementById("div").appendChild(xx);
           }
           function addyuwen(){
               var xx = document.createElement("input");
               xx.setAttribute("type","button");
               xx.setAttribute("value","语文");
               xx.setAttribute("onclick","removeY()");
               xx.setAttribute("id","yuwen");
               document.getElementById("div").appendChild(xx);
           }

           function removeT(){
               var oo = document.getElementById("tiyu");
               oo.remove();
           }
           function removeYY(){
               var oo = document.getElementById("yingyu");
               oo.remove();
           }
           function removeS(){
               var oo = document.getElementById("shuxue");
               oo.remove();
           }
           function removeM(){
               var oo = document.getElementById("meishu");
               oo.remove();
           }
           function removeY(){
               var oo = document.getElementById("yuwen");
               oo.remove();
           }



       </script>

   </head>
   <body>
       <div id="div">

       </div>

       <input type="button" value="体育" id="addT" onclick="addtiyu()"/>
       <input type="button" value="英语" id="addYY" onclick="addyingyu()"/>
       <input type="button" value="数学" id="addS" onclick="addshuxue()"/>
       <input type="button" value="美术" id="addM" onclick="addmeishu()"/>
       <input type="button" value="语文" id="addY" onclick="addyuwen()"/>
   </body>
</html>