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>

巴特西

JS---DOM---元素相关的操作方法

综合案例：

如果只创建一个元素，如何操作？

反之：无则创建，如下：

最新文章

热门文章