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

這些插入節(jié)點(diǎn)的方法不僅能將新創(chuàng)建的DOM元素插入到文檔中，也能對(duì)原有的DOM元素進(jìn)行移動(dòng)(若對(duì)已在文檔中存在的元素使用插入節(jié)點(diǎn)的方法則相當(dāng)于執(zhí)行“移動(dòng)節(jié)點(diǎn)”的操作)

實(shí)例↓

實(shí)現(xiàn)效果： 點(diǎn)擊測(cè)試按鈕，將所有.test標(biāo)簽里面的內(nèi)容都移到該標(biāo)簽外面并刪除所有的.test標(biāo)簽

無(wú)標(biāo)題文檔

*{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屬性

提示：你可以先修改部分代碼再運(yùn)行。

當(dāng)然也可以直接使用replaceWith()方法來(lái)實(shí)現(xiàn)上面的替換效果

無(wú)標(biāo)題文檔

*{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屬性

提示：你可以先修改部分代碼再運(yùn)行。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。