08-JQuery学习之创建元素和添加元素 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>08-创建元素和添加元素</title>
		<style>
			div {
				margin: 10px 0px;
			}

			span {
				color: white;
				padding: 8px
			}

			.red {
				background-color: red;
			}

			.blue {
				background-color: blue;
			}

			.green {
				background-color: green;
			}
			.pink {
				background-color: pink;
			}
			.gray {
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<h3>prepend()方法前追加内容</h3>
		<h3>prependTo()方法前追加内容</h3>
		<h3>append()方法后追加内容</h3>
		<h3>appendTo()方法后追加内容</h3>
		<span class="red">男神</span>
		<span class="blue">偶像</span>
		<div class="green">
			<span>小鲜肉</span>
		</div>
	</body>

	<!-- 
		创建元素和添加元素
			创建元素
				$('内容')
				添加元素
					1、前追加子元素
						指定元素.prepend(内容)			在指定元素内容的最前面追加内容，可以是字符串、html元素、jQuery对象
						$(内容).prependTo(指定元素)		把内容追加到指定元素内部的最前面，可以是字符串、html元素、jQuery对象
					2、后追加子元素
						指定元素.append(内容)
						$(内容).apendTo(指定元素)
					3、前追加同级元素
						before()						在指定元素的前面追加内容
					4、后追加同级元素
						after()							在指定元素的后面追加内容
						
					注：
						在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置；
						如果元素本身存在（已有元素）,会将原来的元素直接剪切设置到指定位置。
	 -->
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 创建元素
		var p = '<p>这是一个p标签</p>';
		console.log(p);
		console.log($(p));
		

		var span = '<span>小奶狗</span>';
		$('.green').prepend(span);
		
		var span2 = '<span>小狼狗</span>';
		$(span2).prependTo($('.green'));
		
		
		var span3  = '<span>小奶狗1</span>';
		var span4  = '<span>小奶狗2</span>';
		$('.green').append(span3);
		$(span4).appendTo($('.green'));
		
		// 将已存在的内容追加到指定元素中
		$('.green').append($('.red'));
		
		// 同级追加
		var sp1 = '<span class="pink">女神</span>' ;
		var sp2 = '<span class="gray">女神</span>' ;
		
		$('.blue').before(sp1);
		$('.blue').after(sp2);
	</script>
</html>
posted @ 2021-03-29 22:04  雪漠阳光  阅读(214)  评论(0)  编辑  收藏  举报