jquery移动dom节点的方法总结

时间：2024-1-30 09:31 作者：韩俊 分类： Html+Css

jquery移动dom节点也是偶尔会用到的DOM操作，下面作者将和大家分享一下如何使用jQuery移动dom节点。

注意移动dom节点和复制dom节点是两回事，移动dom节点是将一个dom节点从一个位置移动到另外一个位置，移动之后该dom节点还是只有一个。而复制dom节点在操作完之后会变成两个。下面还是通过几个实例做一下解释说明吧。

假设页面有如下代码段

<body>
<div>http://www.maopiaopiao.com/javascript-function/586.html</div> 
<p>jquery dom 操作示例</p>
</body>

现在需要将<p>标签移动到<div>标签内，那么可以如下操作

$(function(){
    $('div').append($('p'));
});

操作完之后的页面html代码会变为下面这个样子

<body>
<div>http://www.maopiaopiao.com/javascript-function/586.html<p>jquery dom 操作示例</p></div>
</body>

这里补充说明一下js对dom节点的操作方法常用的有 append,appendTo,prepend,prependTo,after,before,insertAfter,insertBefore 这些方法。