DOM操作--创建、插入、删除元素

ゞ 浴缸里的玫瑰 2024-02-17 23:03 106阅读 0赞

1、创建、插入元素

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script>
  8.             window.onclick = function(){
  9.                 var oTx = document.getElementById("tx");
  10.                 var oBtn = document.getElementById("btn1");
  11.                 var oUl = document.getElementsByTagName("ul")[0];
  13.                 oBtn.onclick = function(){
  14.                     var l = document.createElement('li');
  15.                     l.innerHTML = oTx.value;
  17.                     //oUl.appendChild(l);
  19.                     var aLi = document.getElementsByTagName("li");
  21.                     if(aLi.length == 0){
  22.                         oUl.appendChild(l);
  23.                     }else {
  24.                     oUl.insertBefore(l,aLi[0]);                        
  25.                     }
  26.                 }
  27.             }
  29.         </script>
  30.     </head>
  31.     <body>
  32.         <input id = "tx" type = "text"/>
  33.         <input id = "btn1" type = "button" value = "按钮"/>
  34.         <ul>
  35.         </ul>
  36.     </body>
  37. </html>

2、删除元素

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  7.         <script>
  9.             window.onload = function(){
  10.                 var aLi = document.getElementsByTagName("a");
  11.                 var oUl = document.getElementById("ul1");
  13.                 for(var i = 0; i < aLi.length; i++){
  14.                     aLi[i].onclick = function(){
  15.                         oUl.removeChild(this.parentNode);
  16.                     }
  17.                 }
  18.             }
  20.         </script>
  22.     </head>
  23.     <body>
  25.         <ul id = "ul1">
  27.             <li>zddsfx<a href="javascript:;">删除</a></li>
  28.             <li>dfas<a href="javascript:;">删除</a></li>
  29.             <li>fsdgfh<a href="javascript:;">删除</a></li>
  30.             <li>5465<a href="javascript:;">删除</a></li>
  31.             <li>23434<a href="javascript:;">删除</a></li>
  32.             <li>fh<a href="javascript:;">删除</a></li>
  33.             <li>ilk<a href="javascript:;">删除</a></li>            
  34.         </ul>
  36.     </body>
  37. </html>

发表评论

表情：
评论列表 （有 0 条评论，106人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jQuery操作DOM元素

    作为一个后端程序员，也是要和前端页面打交道的。最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求。 实现上述两个功能当然可以使用原生js来完成，但在实际开

    男娘i男娘i/ 0 赞/ 407 阅读