创建元素和添加元素_元素内插入元素-CSDN博客

本文链接：https://blog.csdn.net/aqzengkuasheng/article/details/122999144

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		创建元素：$(‘元素内容’);
		添加元素：
			1.前追加子元素
			      指定元素.prepend(内容)；在指定元素内部的最前面追加内容
				  $(内容).prependTo(指定元素)；在指定元素内部的最前面追加内容
	        2.后追加子元素
			      指定元素.append(内容)；在指定元素内部的最后面追加内容
			      $(内容).appendTo(指定元素)；在指定元素内部的最后面追加内容
		    3.前追加同级元素  ：在指定元素的前面追加内容
			      before()
			4.后追加同级元素：在指定元素的后面追加内容
			      after()  
				  
			:注：在添加元素时，，如果元素本身不存在（新建元素）此时会将元素添加到指定位置
			    如果元素本身已存在，会将原来的元素直接剪切到指定位置
				常用的方法是prepend 和append
		 -->
			<style type="text/css">
				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 class="blue" >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>
		  <div id="conBlue" class="red">天蓝色</div>
	</body>
	<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//创建元素
		var p="<p>这是一个P标签</p>"
		console.log(p);
		//将p放到$符中就可以乐
		console.log($(p));
		
		//创建元素
		var span="<span>小奶狗</span>";
		//在内部的最前面添加
		$(".green").prepend(span);
		
		//同级追加
		var sp1="<span class='pink'>女神</span>";
		var sp2="<span class='gray'>歌手</span>";
		$(".blue").before(sp1);
		$(".blue").after(sp2);
	</script>
</html>