插入节点append()、insertAfter()的特殊用法：对原有DOM元素进行移动

2011-12-18 01:12 16597 次阅读分类: JS+jQuery 已关闭评论

免打扰阅读

插入节点的方法: append()/appendTo()、prepend()/prependTo()、after()/insertAfter()、before/insertBefore()

这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动（若对已在文档中存在的元素使用插入节点的方法则相当于执行“移动节点”的操作）

实例↓

实现效果： 点击测试按钮，将所有.test标签里面的内容都移到该标签外面并删除所有的.test标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} ul li{ list-style:none;} img {border:0 none;} body {padding:100px;} input[type='button']{width:100px; height:38px;display:block;position:fixed;right:20%; top:50px;} p{color:#f00;} div{ color:#000; border:1px blue solid;} div span{ display:block;} </style> <script type="text/javascript"> $(function(){ $("input[type='button']").focus().click(function(){ $(".test >span").each(function(index, element) { $(this).insertAfter($(this).parent()).prev().remove(); }); }) }) </script> <input type="button" value="点击测试"/> <div><span class="test"><span>1、看不到class属性</span></span><span class="test"><span>2、看不到class属性</span></span><span class="test"><span>3、看不到class属性</span></span></div> </body> </html>

提示：你可以先修改部分代码再运行。

当然也可以直接使用replaceWith()方法来实现上面的替换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} ul li{ list-style:none;} img {border:0 none;} body {padding:100px;} input[type='button']{width:100px; height:38px;display:block;position:fixed;right:20%; top:50px;} p{color:#f00;} div{ color:#000; border:1px blue solid;} div span{ display:block;} </style> <script type="text/javascript"> $(function(){ $("input[type='button']").focus().click(function(){ $(".test >span").each(function(index, element) { var this_html=$(this).parent().html(); $(this).parent().replaceWith(this_html) }); }) }) </script> <input type="button" value="点击测试"/> <div><span class="test"><span>1、看不到class属性</span></span><span class="test"><span>2、看不到class属性</span></span><span class="test"><span>3、看不到class属性</span></span></div> </body> </html>

提示：你可以先修改部分代码再运行。