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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/165104.html

標籤：JavaScript

上一篇：【Leetcode 做題學演算法周刊】第五期

下一篇：JS---DOM---為元素系結事件的引入，為元素系結多個代碼，兼容代碼