欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Web API---DOM---元素相关的操作方法

程序员文章站 2022-05-22 21:43:05
1. 追加子元素 my$("dv").appendChild(obj); 2. 把新的子元素插入到第一个子元素的前面 my$("dv").insertBefore(obj, my$("dv").firstElementChild); 3. 移除父级元素中第一个子级元素 my$("btn2").onc ......

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>

 

 

 

上一篇： Intel十代酷睿T系列首曝 还有Z490主板

下一篇： 他为康熙铲除鳌拜平定三藩 为什么会落到被活活饿死的下场

推荐阅读