jQuery之文档操作的内部插入外部插入、remove()方法和empty()方法的区别

内部插入VS外部插入

<script type="text/javascript">
	$(function(){
	
		//内部的后置插入  结果为:你好,张三
		$("#div1").append(",张三")
	
		
		//内部的前置插入 结果为:嗨!你好,张三
		$("#div1").prepend("嗨!")
		
		
		//外部的后置插入
		/* 
		 结果为:
			嗨!你好,张三
			今天有事吗?一起狂街吧
		*/
		$("#div1").after("今天有事吗?一起狂街吧")
		
	
		//外部的前置插入
		/* 
		 结果为:
			 小花你好啊
			 嗨!你好,张三
			 今天有事吗?一起狂街吧
		*/
		$("#div1").before("小花你好啊")
	})
</script>

<body>
	<div id="div1">你好</div>
</body>

当为标签时

<script type="text/javascript">
	$(function(){
	
		//追加选项
		$("#sel").append("<option>河南</option>")
	
		//追加选项
		$("#sel").append("<option>河北</option>")
		
		//清空所有选项,并设置一个选项
		$("#sel").html("<option>北京</option>")
	})
<body>
	<select id="sel">
		<option>请选择</option>
	</select>
</body>

remove()方法和empty()方法的区别

$(function(){
		alert("remove一个div")
		//移除id为div1的这个元素
		$("#div1").remove()
	
		alert("empty一个div")
		//清空id为div2的这个元素中所有的东西但是这个元素本身不会被移除
		$("#div2").empty()
})
</script>
<body>
	div1开始
	<div id="div1" style="background-color:red">div1</div>
	div1结束
	<br>
	<br>
	div2开始
	<div id="div2" style="background-color:blue">div2</div>
	div2结束
</body>
})

运行前
在这里插入图片描述
运行后
在这里插入图片描述

发布了14 篇原创文章 · 获赞 16 · 访问量 305

猜你喜欢

转载自blog.csdn.net/qq_41490938/article/details/104910527
今日推荐