Case 9- element node operation method of operation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="button" value="按钮" id="btn">
  <ul id="ul">
    <li>111</li>
    <li>222 </ Li > 
    < Li > 333 </ Li > 
  </ UL > 

  < UL ID = "SEL" > 
    
  </ UL > 
  < Script > 
    // the createElement () 
    // the appendChild () 
    // the removeChild () 
    //  
    / / elements inserted into the designated position of the page 
    // insertBefore () 
    // the tag of the current element is replaced 
    // the replaceChild () 
    //  
    var BTN = document.getElementById ( ' BTN ' );
    btn.onclick =  function () {
       var li = document.createElement ( ' li ' ); 
      li.innerText =  ' ABC ' ; 

      // the li ul is inserted into the first position 
      // var = document.getElementById ul ( 'UL'); 
      // ul.insertBefore (Li, ul.children [0]); 
      //  
      //  
      // The replaceChild () 
      // var div = document.createElement ( 'div'); 
      // div.innerText = 'div'; 
      // var UL = document.getElementById ( 'UL'); 
      // ul.replaceChild (div, ul.children [0]); 
      // 
      // 
      // appendChild()
      var ul = document.getElementById('ul');
      var sel = document.getElementById('sel');
      sel.appendChild(ul.children[0]);
    }
  </script>
</body>
</html>

 

Guess you like

Origin www.cnblogs.com/jiumen/p/11413202.html
Recommended