一般js操作节点
①创建节点(元素文本)document.createElement innerHTML
②添加属性 setAttribute
③加入文档 appendChild
操作繁琐还有兼容性问题
jquery操作节点
①$('<div class="a">jquery</div>") 直接在$("")里写元素 文本 属性 要注意闭合标签和使用标准的的xhtml格式
②加入文档支持了好多函数
向下添加节点
$('.a').append(content) 在a元素内的最后添加内容 $(content).appendTo('.a')只不过换了一种方式
$('.a').prepend(content) 在a元素内的最开始添加内容 $(content).prependTo('.a')
同级添加节点
$('.a').after(content) 在a元素同级后添加内容 $(content).insertAfter('.a')
$('.a').before(content) 在a元素同级后添加内容 $(content).insertBefore('.a')
向上父及包裹节点
$('.a').wrap("<div></div>") 给匹配的元素每一个外部包一有个html结构 每个都被包裹了
$('.a').wrapInner("<div></div>") 给匹配的元素每一个内部包裹一个html结构
$('.a').wrapAll("<div></div>") 给匹配的元素集合外层包裹一个html结构 包裹了最外层的
$('.a').unwrap("<div></div>") 删除父元素
删除节点
$('.a').empty()删除内容,自己还在, 都可以传参数缩小范围 事件也删除
$('.a').remove()都删除了,自己也不在了,都可以传参数缩小范围 事件也删除
var a=$('.a').detach() 都删除了 事件还在
$('body').append(a) 恢复清除的结构
复制节点
$('.a').clone() 复制结构
$('.a').clone(true) 复制结构+事件
替换节点
替换后绑定的时间也会被删除
$('.a').replaceWith(newContent) newContent替换a元素
$(newContent).replaceAll('.a') newContent替换a元素
以上操作,不仅能创建新的dom元素插入,也能对原有的dom元素进行移动,
var a =$('#content');
a.insertAfter('.a');
(之前谁会想倒着用吧,倒着可以这么用。)