jQuery append( ) 方法

使用jQuery的 append( ) 方法，我们可以在被选元素的结尾处插入指定的内容。

语法格式：

$(selector).append(content,function(index,currentHTML))

参数：

content（必需）：插入的内容（可以是HTML元素）。

function(index,currentHTML)（可选）：返回待插入内容的函数。

注意：

（1）index为元素的索引。

（2）currentHTML为被选元素的当前 HTML。

示例：

（1）常规方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="../jQuery/jQuery.js"></script><script>$(document).ready(function(){$("button").click(function(){$("div").append("<p class = 'para'>一段文字。</p>");})})</script><style>div {width: 150px;height: 150px;background-color: rgba(74, 165, 66, 0.404);}.para {color: blue;}</style>
</head>
<body><button>按钮</button><div><p>我是一个盒子。</p></div>
</body>
</html>

点击按钮，DIV的结尾处将插入新段落，效果如图：

（2）函数方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="../jQuery/jQuery.js"></script><script>$(document).ready(function(){$("button").click(function(){$("ol li").append(function(index,currentHTML){return "<em>我的索引号为 " + index + " 我当前的HTML为" + currentHTML + "</em>";})})})</script>
</head>
<body><ol><li><b>我是列表项1。</b></li><li><b>我是列表项2。</b></li><li><b>我是列表项3。</b></li></ol><button>按钮</button>
</body>
</html>

点击按钮，效果如图：

jQuery append( ) 方法相关推荐

jquery append()方法与html()方法用法区别
jquery append()方法与html()方法用法区别 [导读] append(content):方法在被选元素的结尾(仍然在内部)插入指定内容,有很多朋友觉得append与html差不多,其它 ...
Jquery append方法使用中遇到问题记录
简单举例说明: //html <div class="answer"></div> 描述: 功能:下滑加载更多,通过ajax请求到数据把组装好的html模板 ...
Jquery append 方法在ie8不兼容问题
var $a=$("<a>"); $("body").append($a); 这段代码在ie8下不兼容,怎么也添加不鸟元素,改成如下即可行: var ...
如何用append连接html文件,jquery append()怎么用？
append()是jquery中的一个内置函数,用于在被选元素的结尾插入指定内容.下面本篇文章给大家介绍一下jquery append()方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有 ...
jquery append、prepend、before等等
1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例复制代码代码如下: $("p").append("Som ...
jQuery学习（七）— append方法与appendTo方法
jQuery学习(七)- append方法与appendTo方法一.append方法二.appendTo方法
Cross Site Scripting DOM攻击jQuery append() 的处理方法
做安全红线使用Fortify工具进行扫描时,jquery append会报Cross Site Scripting DOM风险.解决该问题有两种办法. 一.原生dom方式使用JavaScript原生 ...
jquery的append方法无效
css代码: AAAA BBBB(title="hello") CCCC(class="box") DDDD(title="hello") ...
JQuery中append()方法的使用
.append()方法:将参数指定的内容插入匹配元素集合中每个元素的末尾考虑下面代码: <h2>Greetings</h2> <div class="cont ...

jQuery append( ) 方法

jQuery append( ) 方法相关推荐

最新文章

热门文章