6.1 JQ的DOM操作

最新推荐文章于 2022-04-29 18:09:20 发布

P_ning

最新推荐文章于 2022-04-29 18:09:20 发布

阅读量108

点赞数

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/P_ning/article/details/96840420

版权

jQuery 专栏收录该内容

19 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript" src="../../js库/jquery-2.1.0.js"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
//append被选元素内部后面插入指定内容(在选定标签内)
					//$("#div1").append("添加的东西");//字符串形式
					//$("#div1").append("<p>添加的东西<P>");//标签形式
					$("#div1").append("<font size='40px' color='red'>添加的东西1</font>");//标签加css形式
				});
			});
			
//appendTo与append作用一样但是写的方式不一样而已,appendTo写的方式反过来了
			$(function(){
				$("#btn2").click(function(){
					$("<font size='40px' color='yellow'>添加的东西2</font>").appendTo("#div1");
				});
			});
//prepend和append大致一样,但是它是加在选中标签的内部的前面 
			$(function(){
				$("#btn3").click(function(){
					$("#div1").prepend("<font size='40px' color='blue'>添加的东西3</font>");//标签加css形式
				});
			});
//after添加选定标签的后面(不在选定标签内)
			$(function(){
				$("#btn4").click(function(){
					$("#div1").after("<font size='40px' color='black'>添加的东西3</font>");//标签加css形式
				});
			});
		</script>
		<input type="button" id="btn1" value="append添加" />
		<input type="button" id="btn2" value="appendTo添加" />
		<input type="button" id="btn3" value="prepend添加" />
		<input type="button" id="btn4" value="after添加" />
		<div id="div1">
			这里是原来的内容
		</div>
	</body>
</html>