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

這些插入節點的方法不僅能將新創建的DOM元素插入到文檔中，也能對原有的DOM元素進行移動(若對已在文檔中存在的元素使用插入節點的方法則相當于執行“移動節點”的操作)

實例↓

實現效果： 點擊測試按鈕，將所有.test標簽里面的內容都移到該標簽外面并刪除所有的.test標簽

無標題文檔

*{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;}

$(function(){

$("input[type='button']").focus().click(function(){

$(".test >span").each(function(index, element) {

$(this).insertAfter($(this).parent()).prev().remove();

});

})

})

1、看不到class屬性2、看不到class屬性3、看不到class屬性

提示：你可以先修改部分代碼再運行。

當然也可以直接使用replaceWith()方法來實現上面的替換效果

無標題文檔

*{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;}

$(function(){

$("input[type='button']").focus().click(function(){

$(".test >span").each(function(index, element) {

var this_html=$(this).parent().html();

$(this).parent().replaceWith(this_html)

});

})

})

1、看不到class屬性2、看不到class屬性3、看不到class屬性

提示：你可以先修改部分代碼再運行。

總結

以上是生活随笔為你收集整理的php中append,插入节点append()、insertAfter()的特殊用法：对原有DOM元素进行移动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。