code尘

导航

【jQuery>节点方法

<!-- 加入节点 -->
<div style="width: 100px;height: 100px;background-color: #003EFF;" class="div06">这是div中的元素</div>
<script type="text/javascript">
// $('.div06').html("<br>"+"<a>这是用html()插入的一个超链接,有替换效果</a>"+"<br>")
// var Node01 = $("<br>"+'<a>这是传递法,配合append()使用,让元素插入到其第一个子元素之后</a>'+"<br>")
// $('.div06').append(Node01)
// var Node02 = $("<br>"+'<a>这是传递法,配合prepend()使用,让元素插入到其第一个子元素之前</a>'+"<br>")
// $('.div01').prepend(Node02)
// var Node03 = $("<br>"+'<a>这是传递法,配合appendTo()使用,让元素插入到其所有元素‘尾部’</a>'+"<br>")
// $(Node03).appendTo('.div06')
// var Node04 = $("<br>" + '<a>这是传递法,配合prependTo()使用,让元素插入到其所有元素‘头部’</a>' + "<br>")
// $(Node04).prependTo('.div01')
//除此之外,还有before、insertBefore、after、insertAfter、

// 删除节点
// var resultremove = $('.li01').remove()
// $('resultremove').appendTo('.li01')//remove()删除后不课恢复
// var resultdetach = $('.li02').detach()
// $(resultdetach).prependTo('.li03')//detach()删除后可恢复,注意append和perpend的使用
// var emptyresult = $(".li03").empty()
// $(emptyresult).appendTo('ul')//empty()删除后无法恢复

//复制节点
// var cloneCopy = $('.li01').clone()
// $(cloneCopy).appendTo('.li03')//clone()复制整个节点

//替换节点
// $('.li01').replaceWith('<a>我替换了li01节点</a>')
// $('<a>我替换了li01节点</a>').replaceAll('.li01')replaceAll和replaceWith同理,只是位置不同

//包裹节点
// $('h').wrap('<h1>我用h1包裹了h标签</h1>')
// $("h").wrapAll('<h2>我用wrapAll,h1包裹住了第二个p标签</h2>')
// $('h').wrapInner('<h3>我用wrapInner,h1包裹了其里面的内容</h3>')
// //不同的是他们在JavaScript里面的写法,一个包全部,一个个个包
</script>

posted on 2021-10-18 15:11  code尘  阅读(78)  评论(0编辑  收藏  举报