jquery中函数方法append的用法(附append和preappend的区别)
在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>
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址:https://tangjiusheng.cn/jQuery/1303.html
原文地址:https://tangjiusheng.cn/jQuery/1303.html
