內(nèi)部插入 外部插入 包裹 替換 刪除 復(fù)制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 800px;
padding: 20px;
border: 2px dashed orange;
font-size: 0;
}
#box img{
width: 200px;
}
</style>
</head>
<body>
<h1>DOM 操作</h1>
<hr>
<div id="box">
<img src="./images/1.jpeg" alt="">
<img src="./images/2.jpeg" alt="">
<img src="./images/3.jpeg" alt="">
<img src="./images/4.jpeg" alt="">
<img src="./images/5.jpeg" alt="">
<br>
<h3>內(nèi)部插入</h3>
<button id="appendBtn">append</button>
<button id="appendToBtn">appendTo</button>
<button id="prependBtn">prepend</button>
<button id="prependToBtn">prependTo</button>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$('#appendBtn').click(function () {
// 創(chuàng)建一個(gè)新元素
$('#box').append('<img src="./images/9.jpeg">')
})
$('#appendToBtn').click(function () {
$('<img src="./images/2.jpeg">').appendTo('#box');
})
$('#prependBtn').click(function () {
$('#box').prepend('<img src="images/3.jpeg">');
})
$('#prependToBtn').click(function () {
$('<img src="images/6.jpeg">').prependTo('#box');
})
// 外部插入
$(document).ready(function () {
$('#box').find('img').width(200).height(200);
})
$('#afterBtn').click(function () {
$('#afterBtn').after('<img src="images/6.jpeg">');
})
$('#insertAfterBtn').click(function () {
$('<img src="images/5.jpeg">').insertAfter('#box');
})
$('#beforeBtn').click(function () {
$('#box').before('<img src="images/9.jpeg">')
})
$('#insertAfterBtn').click(function () {
$('<img src="images/4.jpeg">').insertBefore('#box');
})
</script>
</body>
//刪除
<body>
<h1>DOM 操作 -- 刪除</h1>
<hr>
<img src="./images/6.jpeg" id="newImage" alt="">
<div id="box">
<img src="./images/1.jpeg" alt="">
<img src="./images/2.jpeg" alt="">
<img src="./images/3.jpeg" alt="">
<img src="./images/4.jpeg" alt="">
</div>
<br>
<button id="emptyBtn">empty</button>
<button id="removeBtn">remove</button>
<button id="detachBtn">detach</button>
<button id="backBtn">恢復(fù)</button>
<button id="cloneBtn">克隆</button>
<button id="appendBtn">追加元素</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
var removeEle = null;
// 圖片選中
$('#box img').click(function () {
$(this).toggleClass('active');
})
$('#emptyBtn').click(function () {
$('#box').empty();
})
$("#removeBtn").click(function(){
removedEle = $("img.active").remove();
});
$("#detachBtn").click(function(){
removedEle = $("img.active").detach();
});
//恢復(fù)
$("#backBtn").click(function(){
$("#box").append(removedEle);
});
$("#cloneBtn").click(function(){
$("#box").clone().appendTo("body");
});
$("#appendBtn").click(function(){
$("#box").append($("#newImage").clone())
})
});
</script>
</body>
// 替換
<body>
<h1>DOM 操作 -- 替換</h1>
<hr>
<img src="./images/7.jpeg" id="newImg" alt="">
<br>
<div id="box">
<img src="./images/1.jpeg" alt="">
<img src="./images/2.jpeg" alt="">
<img src="./images/3.jpeg" alt="">
<img src="./images/4.jpeg" alt="">
</div>
<br>
<button id="replaceBtn">替換選中的</button>
<button id="replaceAllBtn">replaceAll</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
//圖片選中
$("#box img").click(function(){
$(this).toggleClass("active").siblings("img").removeClass("active");
});
$("#replaceBtn").click(function(){
$("img.active").replaceWith("<img src='./images/6.jpeg'>");
//$("img.active").replaceWith($("#newImg"));
});
$("#replaceAllBtn").click(function(){
$("<img src='./images/8.jpeg'>").replaceAll("img.active");
})
})
</script>
</body>
// 包裹
<body>
<h1>DOM 操作----包裹</h1>
<hr>
<div id="box">
<img src="images/1.jpeg" alt="">
<img src="images/2.jpeg" alt="">
<img src="images/3.jpeg" alt="">
<img src="images/4.jpeg" alt="">
</div>
<button id="wrapBtn">wrap</button>
<button id="wrapAllBtn">wrapAll</button>
<button id="wrapInnerBtn">wrapInner</button>
<button id="unwrapBtn">ubwrap</button>
<hr>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
$('#wrapBtn').click(function () {
$('#box img').wrap('<li>');
})
$("#wrapAllBtn").click(function(){
$("#box img").wrapAll("<li>");
});
$("#wrapInnerBtn").click(function(){
$("#box").wrapInner("<li>");
});
$("#unwrapBtn").click(function(){
$("#box img").unwrap();
});
</script>
</html>
