<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.11.3.min.js"></script>
<script>
$(function () {
$("button:first").click(function () {
// 追加節(jié)點
$("div").append("<P>動態(tài)創(chuàng)建的p元素</P>");
});
$("button").eq(1).click(function () {
// 把這個元素追加給后面$("div")元素
$("<p>動態(tài)創(chuàng)建的p元素</p>").appendTo($("div"));
});
$("button").eq(2).click(function () {
// 首部添加
$("div").prepend("<P>動態(tài)創(chuàng)建的p元素</P>");
});
$("button").eq(3).click(function () {
// 把動態(tài)生成的元素添加給div的頭部
$("<P>動態(tài)創(chuàng)建的p元素</P>").prependTo($("div"));
});
$("button").eq(4).click(function () {
// after 往后面添加兄弟節(jié)點
$("div").after("<p>我是div后面的兄弟節(jié)點</p>");
});
$("button").eq(5).click(function () {
// before 往前面添加兄弟節(jié)點
$("div").before("<p>我是div后面的兄弟節(jié)點</p>");
});
$("button").eq(6).click(function () {
// 把前面的元素，放到后面div元素的前面缺前，兄弟節(jié)點(順序不可顛倒)
$("<p>我在哪蛀醉？</p>").insertBefore("div");
});
$("button").eq(7).click(function () {
// 把前面的元素，放到后面div元素的前面衅码，兄弟節(jié)點(順序不可顛倒)
$("<p>我在哪拯刁？</p>").insertAfter("div");
});
// 刪除節(jié)點元素
$("button").eq(8).click(function () {
$("div").remove();
});
// 刪除子節(jié)點元素,但留下自己
$("button").eq(9).click(function () {
// $("div").empty();
$("div").html(""); // 效果與empty相同，推薦使用此方法
});
// 復(fù)制節(jié)點
$("button").eq(10).click(function () {
// clone 參數(shù) ：
// true ：深度復(fù)制,會將被復(fù)制元素的事件一同復(fù)制
// 默認(rèn)為flase ： 淺層復(fù)制肆良，只復(fù)制元素
$("div").append($("p").clone());
});
// 包裹節(jié)點 用后面的元素包裹前面的元素
$("button").eq(11).click(function () {
$("span").wrap($("p"));
});
// 包裹所有節(jié)點
$("button").eq(12).click(function () {
$("ul").wrapAll($("div"));
});
// 替換節(jié)點
$("button").eq(13).click(function () {
$("ul").replaceWith($("p"));
});
})
</script>
</head>
<body>
<button>append 追加節(jié)點</button>
<button>appendTo 追加節(jié)點</button>
<button>prepend 首部添加</button>
<button>prependTo 首部添加</button>
<button>after 往后面添加兄弟節(jié)點</button>
<button>before 往前面添加兄弟節(jié)點</button>
<button>insertBefore 往前面添加兄弟節(jié)點</button>
<button>insertAfter 往后面添加兄弟節(jié)點</button>
<br/><br/>
<button>remove 刪除節(jié)點</button>
<button>empty 刪除節(jié)點</button>
<button>clone 復(fù)制節(jié)點</button>
<button>wrap 包裹節(jié)點</button>
<button>wrapAll 包裹所有節(jié)點</button>
<button>replaceWith 替換節(jié)點</button>
<div>
<h1>我是h1標(biāo)題</h1>
</div>
<p>我是div外面的p元素筛璧，不是動態(tài)添加的</p>
<span>我是一個小span</span>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
jQuery —— 節(jié)點操作
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門乏悄，熙熙樓的掌柜王于貴愁眉苦臉地迎上來浙值，“玉大人，你說我怎么就攤上這事檩小】牛” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵，是天一觀的道長筐付。 經(jīng)常有香客問我卵惦，道長，這世上最難降的妖魔是什么瓦戚？ 我笑而不...
- 正文 為了忘掉前任沮尿，我火速辦了婚禮，結(jié)果婚禮上较解，老公的妹妹穿的比我還像新娘畜疾。我一直安慰自己，他們只是感情好印衔，可當(dāng)我...
- 文/花漫 我一把揭開白布庸疾。 她就那樣靜靜地躺著，像睡著了一般当编。 火紅的嫁衣襯著肌膚如雪届慈。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼嫂拴，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了贮喧？” 一聲冷哼從身側(cè)響起筒狠，我...
- 正文 年R本政府宣布，位于F島的核電站儡循，受9級特大地震影響舶吗，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜择膝，卻給世界環(huán)境...
- 文/蒙蒙 一誓琼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧肴捉，春花似錦腹侣、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至窃页，卻和暖如春跺株，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背脖卖。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 一．創(chuàng)建節(jié)點 1 2 二．插入節(jié)點jQuery 提供了好幾種個方法來插入節(jié)點：1、內(nèi)部插入節(jié)點方法方法名描述app...
- 通過 JQuery 節(jié)點操作的辦法來實現(xiàn)交互楷拳，減少手動添加類名操作。優(yōu)點是能夠減少重復(fù)功能代碼吏奸，缺點是如果模板類名...
- DOM 中有一個非常重要的功能欢揖，就是節(jié)點模型，也就是 DOM 中的“M”奋蔚。頁面中的元素結(jié)構(gòu)就是通過這種節(jié)點模型來互...
- 節(jié)點操作 1.動態(tài)創(chuàng)建元素 2.html創(chuàng)建元素作用：設(shè)置或返回所選元素的html內(nèi)容（包括 HTML 標(biāo)記）設(shè)置...
- DOM節(jié)點操作 1.創(chuàng)建節(jié)點 一．創(chuàng)建節(jié)點為了使頁面更加智能化她混，有時我們想動態(tài)的在 html 結(jié)構(gòu)頁面添加一個元素...
