17-元素操作的方法

最新推荐文章于 2021-01-13 22:54:23 发布

码农阳神

最新推荐文章于 2021-01-13 22:54:23 发布

阅读量156

点赞数

分类专栏：前端知识

本文链接：https://blog.csdn.net/qq_44797965/article/details/104376163

版权

前端知识专栏收录该内容

74 篇文章 0 订阅

订阅专栏

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

码农阳神

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
17-元素操作的方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="button" value="按钮" id="btn"&...
复制链接

扫一扫