jquery append()方法与html()方法用法区别

定义和用法
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。

$(selector).append(content)

使用函数来附加内容

使用函数在指定元素的结尾插入内容。

语法

$(selector).append(function(index,html))

看个实例

 代码如下 复制代码

<script src="/jquery.min.js" type="text/javascript"></script>
<style>
.imgFocus{border: 1px solid #eee;}
</style>

<p>&nbsp;</p>

<script type="text/javascript">
var showimg = "<div class='imgFocus'>123456</div>";
$("p").append(showimg);
</script>

html() 方法返回或设置被选元素的内容 (inner HTML)。

如果该方法未设置参数,则返回被选元素的当前内容。
返回元素内容
当使用该方法返回一个值时,它会返回第一个匹配元素的内容。

语法

$(selector).html()

设置所有 p 元素的内容:

 代码如下 复制代码

$(".btn1").click(function(){
  $("p").html("Hello <b>world</b>!");
});

例指定元素中清空

 代码如下 复制代码

$("a[href$='logout.asp']").click(function(event) {
  event.preventDefault();
    $.get("/xxlr/Logout.asp","",function(data, textStatus) {
    if (data == 1) {  //表明注销成功
        $('#message').html("");
        $("#userlogin>div").show();
    }
    else {
        $('#message').append("<p><strong>注销失败,请重新尝试!</strong></p>");
    }
    });
}); 

时间: 2024-10-12 01:51:24

jquery append()方法与html()方法用法区别的相关文章

jquery中$(document).ready()和onload用法区别详解介绍

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载!!!) 一般样式控制的,比如图片大小控制放在onload 里面加载; jS事件触发的方法,可以在ready 里面加载; 用jQ的人很多人都是这么开始写脚本的: 通常的写法  代码如下 复制代码 $(function(){ // do something }); 其实这个就是jq ready

jquery append()方法与html()方法的区别及使用介绍_jquery

append(content):方法在被选元素的结尾(仍然在内部)插入指定内容,有很多朋友觉得append与html差不多,其它从英文意义上append是在原有基础上增加,而html中是替换当前所有内容. 定义和用法 append() 方法在被选元素的结尾(仍然在内部)插入指定内容. $(selector).append(content) 使用函数来附加内容 使用函数在指定元素的结尾插入内容. 语法 $(selector).append(function(index,html)) 实例代码: <

jQuery中live与bind方法的区别

 本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用   live的缺点就是,运行完以后不释放空间,太多的使用会占用更多的内存,bind()则点击完以后释放空间   区别一:   Click here   可以给这个元素绑定一个简单的click事件:   $('.clickme').bind('click', function() { $('body

jQuery中fadein与fadeout方法用法示例_jquery

本文实例讲述了jQuery中fadein与fadeout方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

jQuery中show与hide方法用法示例_jquery

本文实例分析了jQuery中show与hide方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

jQuery中slidedown与slideup方法用法示例_jquery

这里结合实例形式总结分析了jQuery中slidedown与slideup方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

jQuery使用hide方法隐藏元素自身用法实例

 这篇文章主要介绍了jQuery使用hide方法隐藏元素自身用法,实例分析了jQuery中hide方法的原理与使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery使用hide方法隐藏元素自身用法,分享给大家供大家参考.具体如下: 下面的JS代码实现让按钮点击后将自己隐藏起来 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <html> <head>

Jquery中ajax方法data参数的用法小结

 本篇文章主要是对Jquery中ajax方法data参数的用法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: $.ajax({    type: "POST",    url: "some.php",    data: "name=John&location=Boston", //第一种方式传参   // data: {name:"John",location:"Boston&qu

Jquery中find与each方法用法实例

这篇文章主要介绍了Jquery中find与each方法用法,实例分析了find与each方法的功能.定义与使用技巧,需要的朋友可以参考下 本文实例讲述了Jquery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 比如: 1 2 3 4$("#id") $("#"+"id") $(this) $(element) 等等,只要灵活