前端基础 -JQuery 插入节点

JQuery 插入节点 两种方式

• 内部插入： append: a.append( c ) 把c插入到a内部的后面 prepend: a.prepend( c ) 把c插入到a内部的前面 appendTo: a.appendTo( c ) 将a插入到c内部的后面 prependTo; a.prependTo( c ) 将a插入到c内部的前面

• 外部插入： after： a.after( c ) 把c插入到a外部的后面 before： a.before( c ) 把c插入到a外部的前面 insertAfter： a.insertAfter( c ) 将a插入到c外部的后面 insertBefore： a.insertBefore( c ) 将a插入到c外部的前面

案例 - 内部插入：

效果图：

代码：

	
		01_内部插入节点.html
		
		
		
			$(document).ready(function() {
				//1.在city的内部的后面追加 反恐
				$("#fk").appendTo($("#city"));
				//2.在city的前面内部插入 反恐
				$("#city").prepend($("#fk"));
			});
		
	

	
		

			
北京
			
天津
			
重庆
		

		

			
反恐
			
星际
		

		
Hello1

	
	
	

案例 - 外部插入：

效果：

代码：

	
		02_外部插入节点.html
		
		
		
			$(document).ready(function() {
				//1.在 p2 的后面插入 city
				$("#p2").after($("#city"));
				//2.在 p2 的前面插入 city
				$("#city").insertBefore($("#p2"))

			});
		
	

	
		

			
北京
			
天津
			
重庆
		

		
I would like to say: p3

		
I would like to say: p2

		
I would like to say: p1