节点操作3jiedian01.html

游鹄君2025年8月24日大约 2 分钟
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>节点操作</title>
  <style type="text/css">
    *{margin:0px;padding:0px;}
    #all{width:800px;height:300px;border:solid 1px blue;margin:30px auto;overflow:auto;}
    .cur{width:100px;height:100px;float:left;margin:5px;border-radius:50%;}
  </style>
</head>
<body>
  <button>尾部插入节点</button>
  <button>头部插入节点</button>
  <button>外部尾部插入节点</button>
  <button>外部头部插入节点</button>
  <button>删除节点</button>
  <button>清空节点</button>
  <button>替换节点</button>
  <button>克隆节点</button>
  <button>包裹节点</button>
  <button>解除包裹</button>
  
  <div id='all'></div>
 
</body>
<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
<script type="text/javascript">
  //封装创建div节点函数
  function createDiv()
  {
    //创建div节点
    var dvs=$('<div class="cur"></div>');
    //添加随机的背景颜色 
    //注意使用css时 如果要添加多个样式属性$(element).css({名:"值",名:"值"})的方式
    dvs.css({background:'rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')',border:'solid 10px rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')'});
    return dvs;
  }
 
  //随机数
  function rand(m,n)
  {
    return Math.ceil(Math.random()*(n-m+1))+(m-1);
  }
 
  //在操作的元素内 相对于创建的节点尾部插入节点
  $('button').eq(0).click(function(){
    //alert(1234);
    var dv=createDiv();
    //第一种
    //$('#all').append(dv);
    //第二种
    dv.appendTo('#all');
  });
 
  //在操作的元素内 相对于创建的节点头部插入节点
  $('button:eq(1)').click(function(){
    var dv=createDiv();
    //第一种
    //$('#all').prepend(dv);
    //第二种
    dv.prependTo('#all');
  });
 
  //在操作的元素外 相对操作的节点尾部插入节点
 
  $('button:nth-child(3)').click(function(){
    var dv=createDiv();
    //第一种
    //$('#all').after(dv);
    //第二种
    dv.insertAfter('#all');
  });
 
  //在操作的元素外 相对操作的节点头部插入节点
  $('button:nth-child(4)').click(function(){
    var dv=createDiv();
    //第一种
    //$('#all').before(dv);
    //第二种
    dv.insertBefore('#all');
  });
  
  //在操作的元素内 删除节点
  $('button:nth-child(5)').click(function(){
 
    $('#all div').first().remove();
  });
 
  //在操作的元素内 清除节点
  $('button:eq(5)').click(function(){
 
    $('#all').empty();
  });
 
  //在操作的元素内 替换节点
  $('button:nth-child(7)').click(function(){
 
    //alert(1234);
 
    $('#all div').eq(1).replaceWith(createDiv());
  });
 
  //克隆节点
  $('button:nth-child(8)').click(function(){
    //第一种
    //$('#all div').eq(2).clone(true).appendTo('#all');
    //第二种
    //获取元素
    var dv=$('#all div').eq(2);
    //克隆
    var dvc=dv.clone(true);
    //确定克隆节点位置
    //dvc.prependTo('#all');
    dvc.insertAfter('#all');
  });
 
  //包裹节点
  $('button:nth-child(9)').click(function(){
    $('#all').wrap('<div class="info"></div>');
    $('.info').css({width:'100%',height:'auto',border:'solid 2px rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')',padding:'5px'});
  });
 
  //解除包裹
  $('button:nth-child(10)').click(function(){
    $('#all').unwrap();
  });
</script>
</html>