zoukankan      html  css  js  c++  java
  • JS---DOM---元素相关的操作方法

    1. 追加子元素

    my$("dv").appendChild(obj);
    2. 把新的子元素插入到第一个子元素的前面
    my$("dv").insertBefore(obj, my$("dv").firstElementChild);
    3. 移除父级元素中第一个子级元素
        my$("btn2").onclick = function () {
          //移除父级元素中第一个子级元素
          my$("dv").removeChild(my$("dv").firstElementChild);
        };

    4. 点击按钮删除div中所有的子级元素,先判断父级元素中有没有第一个子元素

        my$("btn3").onclick = function () {
          //点击按钮删除div中所有的子级元素
          //判断父级元素中有没有第一个子元素
          while (my$("dv").firstElementChild) {
            my$("dv").removeChild(my$("dv").firstElementChild);
          }

     

    综合案例:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <style>
        div {
          width: 200px;
          height: 200px;
          border: 1px solid pink;
        }
      </style>
    </head>
    
    <body>
      <input type="button" value="显示效果" id="btn" />
      <input type="button" value="干掉第一个子元素" id="btn2" />
      <input type="button" value="干掉所有子元素" id="btn3" />
      <div id="dv"></div>
      <script src="common.js"></script>
      <script>
    
        var i = 0;
        my$("btn").onclick = function () {
          i++;
          var obj = document.createElement("input");
          obj.type = "button";
          obj.value = "按钮" + i;
          //my$("dv").appendChild(obj);//追加子元素
          //把新的子元素插入到第一个子元素的前面
          my$("dv").insertBefore(obj, my$("dv").firstElementChild);
          //my$("dv").replaceChild();---自己玩
        };
    
        my$("btn2").onclick = function () {
          //移除父级元素中第一个子级元素
          my$("dv").removeChild(my$("dv").firstElementChild);
        };
    
        my$("btn3").onclick = function () {
          //点击按钮删除div中所有的子级元素
          //判断父级元素中有没有第一个子元素
          while (my$("dv").firstElementChild) {
            my$("dv").removeChild(my$("dv").firstElementChild);
          }
    
        };
      </script>
    </body>
    
    </html>

    如果只创建一个元素,如何操作?

    有则删除----->先判断有没有,有就删除,然后再创建
     
     
    有则删除,无则创建
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <style>
        div {
          width: 200px;
          height: 200px;
          border: 1px solid red;
        }
      </style>
    </head>
    
    <body>
      <input type="button" value="显示效果" id="btn" />
      <div id="dv"></div>
      <script src="common.js"></script>
      <script>
        //有则删除,无则创建
    
        //先判断有没有,有就删除,然后再创建
        my$("btn").onclick = function () {
          //判断,div中有没有这个按钮,有就删除
          //判断这个按钮的子元素是否存在
          if (my$("btn2")) {//如果为true就有
            my$("dv").removeChild(my$("btn2"));
          }
          var obj = document.createElement("input");
          obj.type = "button";
          obj.value = "按钮";
          obj.id = "btn2";
          my$("dv").appendChild(obj);
        };
    
      </script>
    </body>
    
    </html>

    反之:无则创建,如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <style>
        div {
          width: 200px;
          height: 200px;
          border: 1px solid red;
        }
      </style>
    </head>
    
    <body>
      <input type="button" value="显示效果" id="btn" />
      <div id="dv"></div>
      <script src="common.js"></script>
      <script>
    
        my$("btn").onclick = function () {
          //判断这个按钮的子元素是否存在
          if (!my$("btn2")) {//如果为true就有
            var obj = document.createElement("input");
            obj.type = "button";
            obj.value = "按钮";
            obj.id = "btn2";
            my$("dv").appendChild(obj);
          }
    
        };
    
    
      </script>
    </body>
    
    </html>
  • 相关阅读:
    IT项目中使用 json格式数据 保存项目配置信息, 在配置文件再读取json文件的内容进行赋值
    python 使用eval() 可以将json格式的数据,转换为原始数据
    python 取出字典的键或者值/如何删除一个字典的键值对/如何遍历字典
    python2 中 unicode 和 str 之间的转换及与python3 str 的区别
    python 将列表嵌套字典的unicode字符串转换为str格式的字符串的方法
    Django 项目拆分配置文件settings.py
    苹果笔记本调整 pycharm 字体大小的地方
    django rest framework 向数据库中插入数据时处理外键的方法
    java实现文件的压缩和解压
    java 跨数据库导入大数据
  • 原文地址:https://www.cnblogs.com/jane-panyiyun/p/11999424.html
Copyright © 2011-2022 走看看