jQuery -------- 操作追加内容

最新推荐文章于 2023-01-28 23:00:00 发布

qq_42412646

最新推荐文章于 2023-01-28 23:00:00 发布

阅读量255

点赞数

本文链接：https://blog.csdn.net/qq_42412646/article/details/103076694

版权

<html>
	<head>
		<title>jQuery操作文档结构</title>
		<meta charset="UTF-8"/>
		<script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//内部的操作
			function testAppend(){
				//获取需要操作的对象
				var showdiv=$("#showdiv");
				//进行添加操作，指定内容的追加
				showdiv.append("<b>赛高</b>");    //在对象内部的后面添加指定的内容，其是html可解析的内容，和html不同的是：html重新赋值（覆盖）这个在内容后面追加
			}
			function testAppend2(){
				//获取需要操作的对象
				var u2=$("#u2");
				//进行添加操作，指定内容的追加
//				u2.appendTo("#show01");    //在对象的内部后面添加利用选择器选择的对象内容,把前面的对象移动到后面的对象的内部后面(一个剪切复制操作)
				$("#u2").appendTo(show01);
			}
			function testprepend(){
				//获取需要操作的对象
				var showdiv=$("#showdiv");
				//进行添加操作，指定内容的追加
				showdiv.prepend("<i>境界的彼方</i>"); //在对象的内部前面添加内容
			}
			function testprependTo(){
				//获取需要操作的对象
				var showdiv=$("#showdiv");
				//进行添加操作，指定内容的追加
				$("#u2").prependTo(showdiv); //在对象的内部前面添加选择器的对象(移动到)
//				showdiv.prependTo("#u2");
			}
			//外部插入
			function testAfter1(){
				//获取需要操作的对象
				var showdiv=$("#showdiv");
				//进行添加操作，指定内容的追加
				showdiv.after("<b>もちろん</b>"); //在对象的外部的后面添加内容
			}
			function testAfter2(){
				//获取需要操作的对象
				var showdiv=$("#showdiv");
				//进行添加操作，指定内容的追加
				$("#u2").insertAfter(showdiv); //在对象的外部的后面添加选择器的对象(移动到)
//				showdiv.prependTo("#u2");
			}
			function testBefore1(){
				//获取需要操作的对象
				var showdiv=$("#showdiv");
				//进行添加操作，指定内容的追加
				showdiv.before("<b>もちろん</b>"); //在对象的外部的前面添加内容
			}
			function testBefore2(){
				//获取需要操作的对象
				var showdiv=$("#showdiv");
				//进行添加操作，指定内容的追加
				$("#u2").insertBefore(showdiv); //在对象的内部前面添加选择器的对象
//				showdiv.prependTo("#u2");
			}
		</script>
		<style type="text/css">
			#showdiv{
				width: 300px;
				height: 300px;
				border: solid 1px;
			}
			#show01{
				width: 300px;
				height: 300px;
				border: solid 1px;
			}
		</style>
	</head>
	<body>
		<h3>jQuery操作文档结构</h3>
		<h4>内部操作</h4>
		<input type="button" name="" id="" value="测试追加内容--append" onclick="testAppend()"/>
		<input type="button" name="" id="" value="测试移动内容--appendTo" onclick="testAppend2()"/>
		<input type="button" name="" id="" value="测试追加内容--prepend" onclick="testprepend()"/>
		<input type="button" name="" id="" value="测试移动内容--prependTo" onclick="testprependTo()"/>
		<hr />
		<h4></h4>
		<input type="button" name="" id="" value="测试追加内容--after" onclick="testAfter1()"/>
		<input type="button" name="" id="" value="测试移动内容--after" onclick="testAfter2()"/>
		<input type="button" name="" id="" value="测试追加内容--before" onclick="testBefore1()"/>
		<input type="button" name="" id="" value="测试移动内容--before" onclick="testBefore2()"/>
		<hr />
		<div id="showdiv">
			<i>Clannad</i>
		</div><br /><br />
		<div id="show01">
			<!--<u>Clannad After Story</u>-->
		</div>
		<span id="u2"><u>Clannad After Story</u></span>
		<hr />	
	</body>
</html>

qq_42412646

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery -------- 操作追加内容

<html> <head> <title>jQuery操作文档结构</title> <meta charset="UTF-8"/> <script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script> ...
复制链接

扫一扫