新建
jquery(html)
插入
内部
1、尾部插入:jquery(obj).append(jquery(obj)) //jquery(obj).appendTo(jquery(obj))
2、头部插入:jquery(obj).prepend(jquery(obj)) //jquery(obj).prependTo(jquery(obj))
外部
1、尾部插入:jquery(obj).after(jquery(obj)) //jquery(obj).insertAfter(jquery(obj))
2、头部插入:jquery(obj).before(jquery(obj)) //jquery(obj).insertBefore(jquery(obj))
删除
jquery(obj).empty()
jquery(obj).remove()
克隆
jquery(obj).clone([true])
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div{
padding: 10px;
border: 2px red dotted;
}
li{
border: 2px solid skyblue;
font-size: 30px;
}
</style>
<script src="./jquery-3.4.1.min.js"></script>
<body>
<h1>节点操作</h1>
<div id="opBox"></div>
<button id="addPic">添加一个图片</button>
<button id="emptyPic">使用empty删除</button>
<button id="removePic">使用remove删除</button>
<button id="cloneDiv">使用clone</button>
</body>
</html>
<script>
$(document).ready(function(){
/*var $ul = $("<ul></ul>");
for(var i = 1; i < 10; i++)
$ul.append($("<li>这是第"+i+"</li>"));
$("#opBox").append($ul);
$("<li>这是尾部新添加的</li>").appendTo($("ul"));
$("<li>这是头部新添加的</li>").prependTo($("ul"));
$("ul").prepend("<li>这也是头部新添加的</li>");
$("#opBox").after("<div>这是使用after添加的</div>");
$("#opBox").before("<div>这是使用before添加的</div>");
//使用insertAfter是紧挨着要添加到的节点后面添加
$("<div>这是使用insertAfter添加的</div>").insertAfter("#opBox");
//使用insertBefore是紧挨着要添加到的节点前面添加
$("<div>这是使用insertBefore添加的</div>").insertBefore("#opBox");*/
$("#addPic").click(function(){
var $img = $("<img>").attr("src", "./img/t1.png");
$("#opBox").append($img);
});
$("#emptyPic").click(function(){
$("#opBox").empty();//使用empty方法将删除元素节点中的全部节点
});
$("#removePic").click(function(){
$("#opBox").remove();//使用remove方法将删除该元素节点
});
$("#cloneDiv").click(function(){
$("body").append($("#opBox").clone());
});
});
</script>