zoukankan      html  css  js  c++  java
  • 03-JS中添加节点

    JS中添加节点

    1、创建Dom元素
    1) createElement(标签名) 创建一个节点
    节点创建后是不是在页面中能够显示,不是
    2) appendChild(节点) 追加一个节点

    2、插入一个元素
    insertBefore(新节点,原有节点) 在原有节点前插入新节点

    3、删除一个元素
    removeChild(节点) 删除一个节点

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6     </head>
     7     <body>
     8         <input type="text" name="" id="txt1" value="" />
     9         <input type="button" id="btn1" value="添加 li" />
    10         <ul id="ul1">
    11         </ul>
    12     </body>
    13     <script type="text/javascript">
    14         window.onload = function(){
    15             var oBtn = document.getElementById("btn1");
    16             var oUl = document.getElementById("ul1");
    17             
    18             oBtn.onclick=function(){
    19                 //创建一个新节点
    20                 var oLi = document.createElement("li");
    21                 var oTxt = document.getElementById("txt1");
    22                 
    23                 oLi.innerHTML = oTxt.value+"<a href='#'>删除</a>";
    24                 //在ul中添加子节点
    25                 //oUl.appendChild(oLi);
    26                 
    27                 var first = oUl.firstChild;
    28                 if(first){
    29                     oUl.insertBefore(oLi,first);
    30                 }else{
    31                     oUl.appendChild(oLi);
    32                 }
    33                 
    34                 //删除操作
    35                 //获得所有的  a  标签
    36                 var aTag = document.getElementsByTagName('a');
    37                 //console.log(aTag.length);
    38                 
    39                 for (var i=0;i<aTag.length;i++) {
    40                     // 给 a 添加单击事件
    41                     aTag[i].onclick = function(){
    42                         //this.parentNode.style.display = "none";    
    43                         oUl.removeChild(this.parentNode);
    44                     }
    45                 }
    46             }
    47             
    48             
    49         }
    50     </script>
    51     
    52 </html>
  • 相关阅读:
    learning.py报错
    Swift与OC的相互调用
    微信小程序地图之逆地理编码
    微信小程序-滑动视图注意事项
    animate.css动画种类
    利用WKWebView实现js与OC交互注意事项
    jquey下eq()的使用注意事项
    如何判断html页面停止滚动?
    git 常见报错
    openresty中http请求body数据过大的处理方案
  • 原文地址:https://www.cnblogs.com/liuxuanhang/p/7805791.html
Copyright © 2011-2022 走看看