zoukankan      html  css  js  c++  java
  • 17-元素操作的方法

    <!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>
        // createElement()
        // appendChild()
        // removeChild()
        // 
        // 把元素插入到页面的指定位置
        // insertBefore()
        // 把当前元素的标签进行替换
        // replaceChild()
        // 
        var btn = document.getElementById('btn');
        btn.onclick = function () {
          var li = document.createElement('li');
          li.innerText = 'abc';
    
          // 把li 插入到ul中的第一个位置
          // var ul = document.getElementById('ul');
          // ul.insertBefore(li, ul.children[0]);
          // 
          // 
          // 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>
    别废话,拿你代码给我看。
  • 相关阅读:
    样式的使用
    样式的使用
    jqurey基础一
    jQuery三天复习.md
    webstorm快捷键大全
    计算机的进制与编码
    2016-4-29HTML标记的使用
    HTML的基本概况
    Apache Maven 入门篇 ( 上 )
    ehcache.xml 分布试缓存
  • 原文地址:https://www.cnblogs.com/lvxueyang/p/13707412.html
Copyright © 2011-2022 走看看