jquery中函数方法append的用法(附append和preappend的区别)

 分类:jQuery教程时间:2022-11-07 07:30:01点击:

在web前端开发实际运用中,经常会涉及到一些DOM的操作,今给大家分享一下Jquery中的append函数方法和preappend的用法和区别,

1、append()表示向每个元素内部追加内容

2、prepend()向每个匹配的元素内部前置添加内容

实例代码如下:

<!DOCTYPE HTML>
<html>
 <head>
 <title> New Document </title>
 <meta name="Generator" content="EditPlus">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <script type="text/javascript" src="jquery-1.7.js"></script>
 <style type="text/css">
	 p:hover{
	 color:red;
		 cursor:pointer;
		 background:blue;
	 }
 </style>
 <script type="text/javascript">
 <!--
 //给每一个p标签内部的末尾添加一个span标签
	 function f1()
	 {
	 $("p").each(function(){
		 $(this).append("<span style='color:blue'> 大家好,我是append添加的span标签</span>")
		 })
	 }
	 //给每一个p标签内部的开头添加一个span标签
	 function f2()
	 {
	 $("p").each(function(){
		 $(this).prepend("<span style='color:green'>大家好,我是prepend添加的span标签 </span>")
		 })
	 }
 //-->
 </script>
 </head>

 <body>
	<p>床前明月光</p>
	<p>疑是地上霜</p>
	<p>举头望明月</p>
	<p>低头思故乡</p>
 </ul>
<input type="button" value="append" onclick="f1()">
<input type="button" value="prepend" onclick="f2()">
 </body>
</html>

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: