<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <title>测试</title> </head> <body> <div class="one"> <p>test</p> <input type="button" value="append添加" class="append"> </div> <div class="two"> <p >test1</p> <input type="button" value="appendTo添加" class="appendTo"> </div> <div class="three"> <p>test2</p> <input type="button" value="after添加" class="after"> </div> <div class="four"> <p>test3</p> <input type="button" value="insertAfter添加" class="insertAfter"> </div> <div class="five"> <p>test4</p> <input type="button" value="before添加" class="before"> </div> <div class="six"> <p>test5</p> <input type="button" value="insertbefore添加" class="insertbefore"> </div> </body> </html>
<script type="text/javascript">
$(document).on("click",".append",function(){
$(".one p").append("<div>CSDN</div>");//在被选元素的结尾（仍然在内部）插入指定内容。在p的后面追加元素
})
$(document).on("click",".appendTo",function(){
$(‘<div class="child">CSDN!</div>‘).appendTo(‘.two p‘);//append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容的位置和选择器。
})
$(document).on("click",".after",function(){
$(".three p").after("<div>SCDN2</div>");//在被选元素后插入指定的内容。在p的后面追加元素//$("选择器").after("要插入的内容");
})
$(document).on("click",".insertAfter",function(){
//$(".four p").insertAfter("<div>SCDN3</div>");
$("<span>你好！</span>").insertAfter(".four p");//$("要插入的内容").insertAfter("选择器");
})
$(document).on(‘click‘,".before",function(){
$(".five p").before("<span>Hello world!</span>");//在被选元素前插入指定的内容。在p的前面追加元素//$("选择器").before("要插入的内容");
})
$(".insertbefore").click(function(){
$("<span>Hello world!</span>").insertBefore(".six p");//$("要插入的内容").insertBefore("选择器");
});
//加insert和不加insert执行的任务相同，不同的是内容和选择器的位置
</script>
时间： 2024-10-13 23:04:56