Web API --- DOM --- elements associated methods of operation

1. additional sub-elements

my$("dv").appendChild(obj);

2. The new child element is inserted into the front of the first subelement

my$("dv").insertBefore(obj, my$("dv").firstElementChild);

3. Remove the parent element of the first child element

    . My $ ( "btn2") the onclick = function () {
       // remove the parent element of the first child element 
      My $ ( "DV") the removeChild (My $ ( "DV." ) .firstElementChild); 
    } ;

4. Click the button to delete all of the children of div elements, first determine the parent element has no first child

    $ My ( "btn3"). onclick = function () {
       // Click the button to remove all of the child div element 
      // judging parent element has no first child element of 
      the while (My $ ( "dv" ). firstElementChild) { 
        My $ ( "DV") the removeChild (My $ ( "DV." ) .firstElementChild); 
      }

Integrated Case:

<!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>
  <where in = 0 ; 
    my $ ( 
   
   
  
  
  

     " BTN " ) .onclick =  function () { 
      I ++ ;
       var obj = document.createElement ( " INPUT " ); 
      obj.type =  " Button " ; 
      obj.value =  " buttons "  + I;
       // My $ ( "dv") appendChild (obj) ; // append child. 
      @ in front of the new child element inserted into the first child element 
      My $ ( " DV " ) .insertBefore (obj, My $ ( " DV " ) .firstElementChild);
      // my $ ( "DV") The replaceChild ();. --- their play 
    }; 

    my $ ( " btn2 " ) .onclick =  function () {
       // remove the parent element of the first child element of 
      my $ ( " dv " ) .removeChild (My $ ( " dv " ) .firstElementChild); 
    }; 

    My $ ( " btn3 " ) .onclick =  function () {
       // click the button to remove all of the child div element 
      // Analyzing parent element has a first subelement not 
      the while (My $ ( " DV " ).firstElementChild) {
        my$("dv").removeChild(my$("dv").firstElementChild);
      }

    };
  </script>
</body>

</html>

If you create only one element, how to operate?

There are deleted -----> first determine there is not, there are deleted, then create

有则删除,无则创建
<!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 = "display" ID = "BTN"  /> 
  < div ID = "DV" > </ div > 
  < Script the src = "common.js" > </ Script > 
  < Script > 
    // there is deleted, no create 

    // first determine there is not, there are deleted, and then create 
    My $ ( " btn " ) .onclick =  function () {
       // judge, div there is no such button,Then remove 
      // judge this button child element exists 
      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>

On the contrary: it is not created, as follows:

<!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 = "display" ID = "BTN"  /> 
  < div ID = "DV" > </ div > 
  < Script the src = "common.js" > </ Script > 
  < Script > 

    My $ ( " btn " ) .onclick =  function () {
       // determine whether the child element of this button there is 
      iF ( ! My $ ( " btn2 ")) { // If there is true 
        var obj = document.createElement("input");
        obj.type = "button";
        obj.value = "按钮";
        obj.id = "btn2";
        my$("dv").appendChild(obj);
      }

    };


  </script>
</body>

</html>

Web API --- DOM --- elements associated methods of operation

Integrated Case:

If you create only one element, how to operate?

On the contrary: it is not created, as follows:

Guess you like