zoukankan html css js c++ java

节点操作案例9-元素操作的方法

<!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>

查看全文

相关阅读:
upload1
web2
自动生成代码，简化开发
 rabbitmq简易安装
 jenkin安装
 mysql 数据插入为问号？
git 基础复习
 git 使用，强制推远程仓库
 Spring 源码解析(持续集成，哈哈)
ContainerBase.addChild: start: 错误

原文地址：https://www.cnblogs.com/jiumen/p/11413202.html