1.添加子元素
- append()/prepend():给当前元素添加子元素,子元素可以是jq对象,也可以是Dom对象,还可以是html代码,功能类似原生js的appendChild()
//添加子元素到当前元素的末尾
<script>
$(function(){
var $box = $('.box')
//将jquery对象添加到div中
var $p = $('<p>我是添加的p标签</p>');//创建节点
$box.append($p);//将p节点添加到box元素的末尾
//将创建的dom元素添加到div中
var dom_p = document.createElement('p')
dom_p.innerHTML = '我是创建的dom元素'
$box.append(dom_p)
//直接将html代码字符串添加到div中
$box.append('<p>html代码字符串</p>')
})
</script>
![](https://img2020.cnblogs.com/blog/1813302/202009/1813302-20200901141424829-727740859.png)
2.添加兄弟元素
- before()/after():为当前元素添加兄弟元素,参数可以是jQuery创建的节点,也可以是js创建的dom元素,还可以是html代码
<script>
$(function(){
var $box = $('.box')
//将jquery对象添加到div后
var $p = $('<p>我是添加的p标签</p>');//创建节点
$box.after($p);//将p节点添加到box元素的末尾
//将创建的dom元素添加到div后
var dom_p = document.createElement('p')
dom_p.innerHTML = '我是创建的dom元素'
$box.after(dom_p)
//直接将html代码字符串添加到div后
$box.after('<p>html代码字符串</p>')
})
</script>
![](https://img2020.cnblogs.com/blog/1813302/202009/1813302-20200901141447848-850084621.png)
3.移动元素
- appendTo():将当前元素移动到其他元素中(变成其他元素的子元素)
var $p = $('<p>我是添加的p标签</p>');
$p.appendTo($('.box'));
4.清空元素内容
- empty():这个方法可以用清空元素的一切内容,包括子元素和相关事件
$('.box').empty()
- 不推荐使用html()来清除内容,有可能造成内存泄漏
5.移除当前元素
$('.box').remove()
5.批量操作
- 相关方法:add(element,context),相关参数和jquery获取元素一致
- 作用:当你要同时操作多个元素,但是这些元素有没有办法一次性获取的时候,就可以使用这个方法来添加新的元素到列队中
<body>
<div id="box">我是div</div>
<div class="parent">
<span>我是div中的span</span>
</div>
<span>我是外面的span</span>
<p>我是p</p>
</body>
<script>
$(function(){
$("div").add("span",".parent").add("p").css("color","red")
})
</script>
//等价于
$("div").css("color","red")
$(".parent span").css("color","red")
$("p").css("color","red")
5.克隆节点
- 相关方法:clone(),参数为布尔值,默认false
- false:默认,会克隆元素的本身和他的子节点,不包括js或者jquery代码添加的事件
- true:深克隆,除了克隆元素的本身和他的子节点,还包括js或者jquery代码添加的事件
//基本用法
var $c = $('.box>p').clone();//克隆box下所有的p标签
$('.box').after($c);//将克隆的元素插入到box的后面
- 通过js或者jquery代码添加的事件监听只有true才会被复制
<div class="box">
<p>不关我的事</p>
<p id="p2">我是被复制的p元素</p>
<p>it has nothing to do with me</p>
</div>
$(function() {
$('#btn').click(function() {
$('#pp').click(sayHello);
var $c1 = $('#p2').clone(true);//点击会触发sayHello()
var $c2 = $('#p2').clone(false);//点击无法触发sayHello()
$c1.appendTo($('.box'));
$c2.appendTo($('.box'));
})
})
function sayHello() {
alert('hello');
}
- 与原生cloneNode(布尔值)的方法对比
false:默认,只复制元素本身,而不包含子元素
true:深复制,包括元素本身和他的后代元素