<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>节点操作</title> <script src="./jquery-1.8.3.min.js"></script> <style> *{margin:0;padding: 0;} .box{ width: 800px; height: 600px; border:1px solid red; } .item{ width: 150px; height: 150px; background: pink; border-radius: 50%; float:left; } </style> </head> <body> <button>在元素内部的尾部插入元素(append)</button> <button>在元素内部的头部插入元素(prepend)</button> <button>在元素外部的后面插入元素(after)</button> <button>在元素外部的前面插入元素(before)</button> <button>删除节点(remove)</button> <button>清空(empty)</button> <button>克隆元素(clone)</button> <div class="box"></div> <script> // 绑定单击事件 在元素内部的尾部插入元素 $('button').eq(0).click(function(){ // 调用创建元素的函数 var oDiv=createDiv(); // 插入新的元素 append() appendTo() // $('box').append(oDiv); // 在指定元素里面的尾部插入新元素 // oDiv.appendTo($('.box')); // 将新的元素插入到指定元素内部的尾部 // 直接添加会把原来元素拿走 // $('button').eq(6).appendTo($('.box')); // 先克隆 var Ne=$('button').eq(6).clone(true); $('.box').append(Ne); }) // 在元素内部的头部插入新的元素 $('button').eq(1).click(function(){ // 调用创建新元素的函数 var oDiv=createDiv(); // 插入元素 prepend() prependTo() //$('.box').prepend(oDiv);// 在指定元素内部的前面插入 oDiv.prependTo($('.box'));// 将新元素插入到指定元素内部的前面 }) // 在元素外面的后面插入节点(元素) $('button').eq(2).click(function(){ // 调用创建元素的函数 var oDiv=createDiv(); // 开始插入 after() insertAfter() // $('.box').after(oDiv); //在元素外面的后面插入新元素 oDiv.insertAfter($('.box')); // 将新元素插入到指定元素外面的后面 }) // 在元素外面的前面出入节点(元素) $('button').eq(3).click(function(){ // 先调用创建元素的函数 var oDiv=createDiv(); // 开插入 before() insertBefore // $('.box').before(oDiv); // 在指定元素外面的前面插入新的元素 oDiv.insertBefore($('.box')); // 将新元素插入到指定元素外面的前面 }) // 删除节点 $('button').eq(4).click(function(){ // 删除元素 $('body').remove(); //. 会删除自己 }) // 清空元素 $('button').eq(5).click(function(){ // 清空 $('.box').empty();// 只删除指定元素内部的元素 }) // 克隆元素 // 不加参数 只是单纯的克隆元素 如果添加true参数,会把元素的事件一起克隆 $('button').eq(6).click(function(){ var Ne=$(this).clone(true); console.log(Ne); // 将克隆的额元素添加到box $('.box').append(Ne); }) // 封装创建新元素的函数 function createDiv(){ // 创建元素 var Ndiv=$('<div class="item"></div>'); Ndiv.css('background','rgb('+rund(0,255)+','+rund(0,255)+','+rund(0,255)+')'); return Ndiv; } // 封装随机函数 function rund(m,n){ return Math.floor(Math.random()*(n-m+1))+m; } </script> </body> </html>