6.1 JQ的DOM操作
程序员文章站
2022-07-14 22:31:11
...
<!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>
上一篇： iframe高度自适应
下一篇： 获取URL的参数值