1.创建节点 --- 创建的都是标签节点
const 变量 = $('<标签 属性属性值...>内容</标签>')
2.写入节点
父级标签中,添加子级标签
父级结束位置,新增节点
$(父级标签).append(子级标签)
$(子级标签).appendTo( 父级标签 )
父级起始位置,新增节点
$(父级标签).prepend(子级标签)
$(子级标签).prependTo(父级标签)
添加同级兄弟标签
已有元素,之后新增节点
$(已有标签).after(写入标签)
$(写入标签).insertAfter(已有标签)
已有元素,之前新增节点
$(已有标签).before(写入标签)
$(写入标签).insertBefore(已有标签)
3.删除节点
删除标签的内容,标签本身,标签的属性等,都还存在
$().empty()
删除整个标签
$().remove()
4.克隆标签
语法1: 只克隆标签的属性和内容,不克隆绑定的事件
const 变量 = $().clone()
语法2: 克隆标签的属性和内容,以及标签本身和子级标签,所有绑定的事件
const 变量 = $().clone(true)
语法3: 克隆标签的属性和内容,只克隆当前标签绑定事件,不会克隆子级标签绑定事件
const 变量 = $().clone(true , false)
语法4: 如果只需要克隆子级标签的事件,不克隆父级标签的事件
htmlcssjs
<div class="a">不克隆父级标签事件
<p class="b">只克隆子级标签事件</p>
<span>不阻止事件传播,克隆的子级事件也不会触发父级事件</span>
</div>
随便写写
$('.a').click(function(e){
// e.stopPropagation();
console.log('a');
})
$('.b').click(function(e){
// e.stopPropagation();
console.log('b');
})
// 克隆标签和标签内容,不克隆标签事件
// 删除标签中,已有的标签
// 可以子级标签,同时克隆事件,然后写入没有事件的父级标签中
const oD2 = $('div').clone();
oD2.find('p').remove().end().find('span').remove().end().append($('div>p').clone(true)).append( $('div>span').clone(true) )
$('div').after(oD2);
Comments | NOTHING