一眼看破插入节点的8个方法

发表于 | 分类于 ，

No description provided.

直接看效果

效果图

总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1. jquery插入节点为什么会有8个方法？
    一个标签由开始标签和结束标签组成，因为标签的前后、内外和表述方式的不同，而造就了8个方法。
    eg://两句话理解“内外”的含义
        1）教室的前面有一棵树            //外面的前面
        2）教室的前面有一张讲台         //里面的前面	
        //两句话理解“表述方式不同”的含义
        1）给 我 钱               //这种表达方式，目标(target)在前，内容(content)在后
        2）把 钱 给 我            //这种表达方式，内容(content)在前，目标(target)在后
2. $(target).append(content)/$(content).appendTo(target) - 在被选元素的内部的结尾插入内容
   $(target).prepend(content)/$(content).prependTo(target) - 在被选元素的内部的开头插入内容
   $(target).after(content)/$(content).insertAfter(target) - 在被选元的素外部之后插入内容
   $(target).before(content)/$(content).insertBefore(target) - 在被选元素的外部之前插入内容
3. 插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动

上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>插入节点</title>
<style type="text/css">
div{
	background:lightblue;
	width:120px;
	color:red;
	padding:10px;}
img{
	display:block;
	padding:10px;
	background:#e8e8e8;
	width:100px;
	height:100px;
}
</style>
</head>
<body>
<div>知人者智</div>
<select>
    <option>	</option><!--选中此项则将页面还原为初始状态-->
    <option>append</option>
    <option>appendTo</option>
    <option>prepend</option>
    <option>prependTo</option>
    <option>after</option>
    <option>insertAfter</option>
    <option>before</option>
    <option>insertBefore</option>
</select>
<script src="jquery/jquery-2.2.3.js"></script><!--路径记得用自己电脑的文件夹路径来代替-->
<script>
$(function(){
	var $div = $("div"),
	    $addImg = $("<p><img src='images/t01ab7e06858b5f3e99.jpg'></p>"),//自己找个图片，使用自己的图片路径
	    $select = $("select");
	// 如果以下这一段代码看不懂，可以使用附于最后含有switch语句的代码，两段选其一即可。		
	$select.change(function(){
		var selectedVal = $select.find("option:selected").val();
		if(selectedVal){ // 如果选中的不是第一项（第一项为空字符串，将其转换为布尔值则为false）
			if(selectedVal.length<8){ // 如果选中项的值的长度小于8，即选中的是（append、prepend、after、before）之一。
				$div[selectedVal]($addImg);
			}else{ // 如果选中项的值的长度不小于8，即选中的是（appendTo、prependTo、insertAfter、insertBefore）之一。
				$addImg[selectedVal]($div);
			}
		}
		else{ // 选中第一项则将页面还原为初始状态
			$div.html("知人者智").siblings("p").remove();
		}
	});
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
可做替补的代码段：
	$select.change(function(){
		switch($select.find("option:selected").val()){
		case "append":
			$div.append($addImg);
		break;
		case "appendTo":
			$addImg.appendTo($div);
		break;
		case "prepend":
			$div.prepend($addImg);
		break;
		case "appendTo":
			$addImg.prependTo($div);
		break;
		case "append":
			$div.prependTo($addTxt);
		break;
		case "appendTo":
			$addImg.appendTo($div);
		break;
		case "after":
			$div.after($addImg);
		break;
		case "insertAfter":
			$addImg.insertAfter($div);
		break;
		case "before":
			$div.before($addImg);
		break;
		case "insertBefore":
			$addImg.insertBefore($div);
		break;
		default:
			$div.html("知人者智").siblings("p").remove();
		break;
		}
	});