![368ae71824382ac413a5a9e9c747ee94.png](https://i-blog.csdnimg.cn/blog_migrate/a2800437f165642725afa60e253c9033.jpeg)
好好学习,天天向上
本章主要内容是:创建元素、删除元素、清空元素、克隆元素
1、创建元素
- 语法 $('<li></li>')
追加元素 1
- 向父元素最后追加
- 语法:父元素jQuery对象.append(新创建的jQuery对象);
- 语法:新创建jQuery对象.appendTo('父元素选择器' 或 父元素jQuery对象);
// 创建新的元素
var $newLi = $('<li>这是创建的标签</li>');
// 获取 ul 元素
var $ul = $("ul");
// $ul.append($newLi);
// $newLi.appendTo($ul);
$newLi.appendTo("ul");
![f4c862ac529124e58ab2c4811f64fee9.png](https://i-blog.csdnimg.cn/blog_migrate/1cdb0235a6229986a010b2716118a338.png)
- 向父元素最前面追加
- 语法:父元素jQuery对象.prepend(新创建的jQuery对象);
- 语法:新创建jQuery对象.prependTo('父元素选择器' 或 父元素jQuery对象);
// $ul.prepend($newLi);
// $newLi.prependTo($ul);
$newLi.prependTo("ul");
![529d883d121a720b9093d75608a7c71c.png](https://i-blog.csdnimg.cn/blog_migrate/7f8489f10dabc268fbd62ce29ce155f9.png)
追加元素 2
- 向元素后面追加新的兄弟
- 语法:jQuery对象.after(新创建的jQuery对象);
- 语法:新创建jQuery对象.insertAfter('选择器' 或 jQuery对象);
<ul>
<li>这是原有的标签</li>
<li class="old">这是原有的标签</li>
<li>这是原有的标签</li>
<li>这是原有的标签</li>
</ul>
// $oldLi.after($newLi);
// $newLi.insertAfter($oldLi);
$newLi.insertAfter(".old");
![8f4be95023cf551f24bf2c50f96a0154.png](https://i-blog.csdnimg.cn/blog_migrate/ba124d582735090c9f9e296ad807e0fd.png)
- 向元素前面追加新的兄弟
- 语法:jQuery对象.before(新创建的jQuery对象);
- 语法:新创建jQuery对象.insertBefore('选择器' 或 jQuery对象);
// $oldLi.before($newLi);
// $newLi.insertBefore($oldLi);
$newLi.insertBefore(".old");
![921ec773477d40d512145ec231b0addf.png](https://i-blog.csdnimg.cn/blog_migrate/a94676b4f9f96f708d907d65266a549a.png)
2、删除元素
- 语法:jQuery对象.remove();
- 删除谁就让谁调用这个方法
<ul>
<li>这是第 1 个标签</li>
<li>这是第 2 个标签</li>
<li class="third">这是第 3 个标签</li>
<li>这是第 4 个标签</li>
<li>这是第 5 个标签</li>
</ul>
$(".third").remove();
![8003235d3a761c664c00956d5daf0dcc.png](https://i-blog.csdnimg.cn/blog_migrate/83033152a63aca23c8014d3e223feb2f.png)
3、清空元素
<div class="box">
<p>段落</p>
<h2>标题</h2>
</div>
<ul>
<li>这是第 1 个标签</li>
<li>这是第 2 个标签</li>
<li class="third">这是第 3 个标签</li>
<li>这是第 4 个标签</li>
<li>这是第 5 个标签</li>
</ul>
- 清空方式1:jQuery对象.empty(); 推荐使用, 清空内部的所有元素及元素相关的事件
$(".box").empty();
![f286be80cabb2b65b8139f79e5b81a53.png](https://i-blog.csdnimg.cn/blog_migrate/3b14ebaf145f6ba27abbd85b9929aff4.png)
- 清空方式2:jQuery对象.html(''); 仅仅清空内部的元素,不清清理内存中的元素的事件
$(".box").html("");
4、克隆元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 20px;
}
.demo {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<h2>标题1</h2>
<p>段落1</p>
</div>
<div class="demo">
<h2>标题2</h2>
<p>段落2</p>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(".box").click(function(){
alert("你好");
});
</script>
</body>
</html>
- 语法:jQuery对象.clone(布尔值); 返回克隆好的元素
- 参数:
- 默认是false,表示仅仅克隆内容
// 获取 box 元素
var $box = $(".box");
// 克隆 box
var $newBox = $box.clone(false); //只克隆内容,不克隆事件
// 添加到 body 最后
$("body").append($newBox);
![34841e636b61c041d568770ee21fa987.gif](https://i-blog.csdnimg.cn/blog_migrate/2f933927649a8f7b1333e04df383d1ba.gif)
-
- true,克隆内容和事件
var $newBox = $box.clone(true); //克隆内容,克隆事件
![bda9bbbbe2e20b60ac4567bb11bd376b.gif](https://i-blog.csdnimg.cn/blog_migrate/974b9b82f549b7ae0e599c82330826ae.gif)