08-jquery 文档Dom操作大全-建议收藏

jQuery 插入元素

内部插入

append()方法

语法格式

• append(内容)
• Append(function(index,html))

该方法在匹配元素集合的每个元素末尾插入由参数指定的内容并返回jQuery对象。

html

<button>按钮</button>		
<div class="b">
	<h2>this 我是h2</h2>
</div>

js

$(function(){
    
    
	$("button").click(function(){
    
    
		$("div").append("<h1>this is H1</h1>");
	})
})

单击完按钮得到的html结构

<button>按钮</button>		
<div class="b">
	<h2>this 我是h2</h2>
	<h1>this is H1</h1>
</div>

---

prepend()方法

语法格式

• prepend(内容)

此方法将参数指定的内容插入匹配元素集合中每个元素的开头并返回jQuery对象。

html

<button>按钮</button>		
<div class="b">
	<h2>this 我是h2</h2>
</div>
<div class="c">
	<h2>this c 里面的h2</h2>
</div>

js

$(function(){
    
    
	$("button").click(function(){
    
    
    	$("div").prepend("<h1>this is H1</h1>");
	})
})

单击完按钮得到的html结构

<button>按钮</button>		
<div class="b">
    <h1>this is H1</h1>
	<h2>this 我是h2</h2>
</div>
<div class="c">
    j<h1>this is H1</h1>
	<h2>this c 里面的h2</h2>
</div>

---

prependTo()方法

语法格式

• prependTo(target)

此方法将匹配元素集合中的每个元素插入目标元素的开头并返回jQuery对象。

html

<button>按钮</button>		
<div class="b">
    <h2>this 我是h2</h2>
</div>

js

$(function(){
    
    
	$("button").click(function(){
    
    
        $("<p>我要上天</p>").prependTo($("div"));
	})
})

单击完按钮得到的html结构

<button>按钮</button>		
<div class="b">
    <p>我要上天</p>
    <h2>this 我是h2</h2>
</div>

---

jQuery 插入元素-外部插入

以下方法为在指定元素的相邻位置（之前或之后）上插入内容。

after()方法

该方法在匹配元素集合中的每个元素之后插入由参数指定的内容并返回jQuery对象。

before()方法

此方法将参数指定的内容插入到匹配元素集合中的每个元素之前，并返回jQuery对象。

after 案例
html

<button>按钮</button>		
<div class="b">
	<h2>this 我是h2</h2>
</div>

js

$(function(){
    
    
	$("button").click(function(){
    
    
		$("div").after("<h1>this is H1</h1>");
	})
})

单击完按钮得到的html结构

<button>按钮</button>		
<div class="b">
	<h2>this 我是h2</h2>
</div>
<h1>this is H1</h1>1

---

before 案例
html

<button>按钮</button>		
<div class="b">
	<h2>this 我是h2</h2>
</div>

js

$(function(){
    
    
	$("button").click(function(){
    
    
		$("div").before("<h1>this is H1</h1>");
	})
})

单击完按钮得到的html结构

<button>按钮</button>
<h1>this is H1</h1>
<div class="b">
	<h2>this 我是h2</h2>
</div>

---

insertAfter()方法

该方法在匹配元素集合中的每个元素插入到目标元素之后并返回jQuery对象。

insertBefore()方法

该方法在匹配元素集合中的每个元素插入到目标元素之前并返回jQuery对象。

insertAfter () 案例
html

<button>按钮</button>		
<div class="b">
	<h2>this 我是h2</h2>
</div>

js

$(function(){
	$("button").click(function(){
	    $("<h1>this is H1</h1>").insertAfter ($("div"))
	})
})

单击完按钮得到的html结构

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>
<h1>this is H1</h1>

---

insertBefore () 案例
html

<button>按钮</button>		
<div class="b">
	<h2>this 我是h2</h2>
</div>

js

$(function(){
    
    
	$("button").click(function(){
    
    
	    $("<h1>this is H1</h1>").insertBefore ($("div"))
	})
})

单击完按钮得到的html结构

<button>按钮</button>
<h1>this is H1</h1>
<div class="b">
	<h2>this 我是h2</h2>
</div>

---

删除与替换元素

作者：曾庆林

删除元素

以下方法可以从文档中删除指定的DOM元素，或从指定元素中删除所有子节点。

• remove()方法
• empty()方法

remove（）案例
html

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

js

$(function(){
    
    
	$("button").click(function(){
    
    
	    $("p:eq(0)").remove();
	})	
})

单击按钮执行后的结果

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>

<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

第一个p元素会被删除

---

empty（）案例
html

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

js

$(function(){
    
    
	$("button").click(function(){
    
    
	    $("p:eq(0)").empty();
	})	
})

单击按钮执行后的结果

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>
<p></p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

第一个p元素内容会被清空

---

替换元素

以下方法用来对DOM元素执行替换操作，即以新建元素或现有元素替换指定的目标元素。

• replaceWith()方法
• replaceAll()方法

replaceWith()案例
html

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

js

$(function(){
    
    
	$("button").click(function(){
    
    
	   $("p").replaceWith("<a>this is a </a>");
	})	
})

单击按钮执行后的结果

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>
<a>this is a </a>
<a>this is a </a>
<a>this is a </a>
<a>this is a </a>
<a>this is a </a>

所有的的p元素都会替换为a元素

replaceAll()案例
html

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

js

$(function(){
    
    
	$("button").click(function(){
    
    
	  $("<div>到碗里来</div>").replaceAll($("p"));
	})	
})

单击按钮执行后的结果

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>
<div>到碗里来</div>
<div>到碗里来</div>
<div>到碗里来</div>
<div>到碗里来</div>
<div>到碗里来</div>

所有的的p元素都会替换为a元素

---

复制元素

clone() 复制元素
clone(true) 复制元素并复制元素绑定的事件

clone() 案例
html

<button>按钮</button>

js

$(function(){
    
    
	$("button").click(function(){
    
    
	    var btn=$(this).clone(true);
		//true 还会复制事件
		btn.insertAfter($(this));
	})	
})

单击任意按钮执行后的结果

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
...

所有的的p元素都会替换为a元素

包裹与解包元素

1. wrap() 方法
2. unwrap() 方法
3. wrapAll() 方法
4. wrapInner() 方法

wrap()案例
html

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

js

$(function(){
    
    
	$("button").click(function(){
    
    
	    $("p").wrap("<div>");
	})	
})

单击按钮执行后的结果

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>
<div><p>itemp1</p></div>
<div><p>itemp2</p></div>
<div><p>itemp3</p></div>
<div><p>itemp4</p></div>
<div><p>itemp5</p></div>

每个p元素外面都后包裹一个 div

---

wrapAll()案例
html

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

js

$(function(){
    
    
	$("button").click(function(){
    
    
	   $("p").wrapAll("<div>")
	})	
})

单击按钮执行后的结果

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>
<div>
    <p>itemp1</p>
    <p>itemp2</p>
    <p>itemp3</p>
    <p>itemp4</p>
    <p>itemp5</p>
</div>

所有的p元素都会包裹在一个div里面

---

wrapInner()案例
html

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>
<p>itemp1</p>
<p>itemp2</p>
<p>itemp3</p>
<p>itemp4</p>
<p>itemp5</p>

js

$(function(){
    
    
	$("button").click(function(){
    
    
	   $("p").wrapInner("<a href=''>")
	})	
})

单击按钮执行后的结果

<button>按钮</button>
<div class="b">
	<h2>this 我是h2</h2>
</div>
<div>
    <p><a href=''>itemp1</a></p>
    <p><a href=''>itemp2</a></p>
    <p><a href=''>itemp3</a></p>
    <p><a href=''>itemp4</a></p>
    <p><a href=''>itemp5</a></p>
</div>

每个 p 里面都包裹了一个a元素

---

unwrap()案例
html

<button>按钮</button>
<p><a href="">小<span><i>我是一个小i</i></span></a></p>

js

$(function(){
    
    
	$("button").click(function(){
    
    
	  $("i").unwrap()
	})	
})

单击按钮执行后的结果

<button>按钮</button>
<p><a href="">小<i>我是一个小i</i></a></p>

每单击一次按钮 i都少一层父亲元素

IT入门 感谢关注

学习地址： www.520mg.com/it