jQuery之创建和添加元素

最新推荐文章于 2024-04-29 17:01:02 发布

幼稚园「先生」

最新推荐文章于 2024-04-29 17:01:02 发布

阅读量556

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_63040021/article/details/131132258

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

创建元素和添加元素

创建元素
$(“内容”)
添加元素
1. 前追加子元素
  指定元素.prepend(内容) 在指定元素内部的最前面追加内容，内容可以是字符串、html元素或jquery对象。
  $(内容).prependTo(指定元素); 把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jquery对象。
2. 后追加子元素
  指定元素.append(内容) 在指定元素内部的最后面追加内容，内容可以是字符串、html元素或jquery对象。
  $(内容).appendTo(指定元素); 把内容追加到指定元素内部的最后面，内容可以是字符串、html元素或jquery对象。
3. 前追加同级元素
  before() 在指定元素的前面追加内容
4. 后追加同级元素
  after() 在指定元素的后面追加内容
注：
在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置；
如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>创建元素和添加元素</title>
		<style>
			div	{
				margin: 10px 0;
			}
			span{
				color: white;
				padding: 8px
			}
			.rd{
				background-color: red;
			}
			.bl{
				background-color: blue;
			}
			.gn{
				background-color: green;
			}
			.pk {
				background-color: pink;
			}
			.gy{
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<h3>prepend()方法前追加内容</h3>
		<h3>prependTo()方法前追加内容</h3>
		<h3>append()方法后追加内容</h3>
		<h3>appendTo()方法后追加内容</h3>

		<span class="rd">rap</span>
		<span class="bl">跳</span>
		<div class="gn">
			<span >唱</span>
		</div>
	</body>
	 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	 <script type="text/javascript">
	 	// 创建元素
		const p = "<p>这是一个p标签</p>";
		console.log('元素p',p);
		console.log('创建的元素',$(p));

		/* 添加元素 */
		// 创建元素
		const span = "<span>小狗</span>";
		// 得到指定元素，并在元素的内部最前面追加内容
		$(".gn").prepend(span);
		const span2 = "<span>狼狗</span>";
		$(span2).prependTo($(".gn"));

		const span3 = "<span>小狗1</span>";
		const span4 = "<span>小狗2</span>";
		$(".gn").append(span3);
		$(span4).appendTo($(".gn"));

		// 将已存在内容追加到指定元素中
		$(".gn").append($(".rd"));


		/* 同级追加 */
		const sp1 = "<span class='pk'>大白</span>";
		const sp2 = "<span class='gy'>小白</span>";

		$(".bl").before(sp1);
		$(".bl").after(sp2);

	 </script>
</html>