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

append(content):方法在被选元素的结尾(仍然在内部)插入指定内容,有很多朋友觉得append与html差不多,其它从英文意义上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> </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>");
    }
    });
}); 

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

时间: 2024-08-07 21:19:38

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

jquery中this与$(this)的用法区别

jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test"; }, fucntion() { this.title = "OK”; } ); 这里的this其实是一个Html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的. 但是如果将this换成$(this)就不是那回事了,就会报错了. 以下写法是错误的

jquery中html 与 text方法的区别

jquery中html 与 text方法的区别 24 May 2012/in 网站设计和开发 /by Bruce 接鉵jquery的时间并不长,以前都是用直接用js写的,现在发现在jquery这个框架用起来很方便,不但代码量少了,使用也比较简单,对于浏览器的兼容问题也不用担心,在使用的过程中也会遇到一些疑问,在html标签中附加子标签时所用的方法html()与text()的区别. 通常在用jquery写ajax时,都会用到html()这个方法,而不用text()这个方法,他们之间有什么区别呢?

处理jQuery append加入的元素 绑定事件无效的方法

通过jquery append(或者before.after,一样)新添加进网页的元素,常用的事件不能触发,比如:append了id 为 abc 的元素,那么 $(#abc).click(function(){})是没有效果的. 解决方法:用on函数 一直以为on函数只有2个参数 正确格式: $("outerSelector").on('eventType','selector',function(){}): outerSelector 是一个一直存在的DOM, selector是你要

jQuery 中 attr() 和 prop() 方法的区别&lt;转&gt;

前几天,有人给 Multiple Select 插件 提了问题: setSelects doesn't work in Firefox when using jquery 1.9.0 一直都在用 jQuery 1.8.3 的版本,没有尝试过 jQuery 1.9.0 的版本. 于是,开始调试代码,在 1.9.0 的版本中: <input type="checkbox" /> <script> $(function() { $('input').click(fun

积跬步,聚小流------实例分析jquery开发插件两种方法的区别

1.简介 jquery为开发插件提供了两个方法: *  jquery.extend(object);   为jquery类本身添加新的方法 *  jquery.fn.extend(object);  用来为jquery对象添加新的方法 2.理论介绍 分析这两个方法,不同点就在于中间多了一个.fn,那么这个.fn又是什么意思呢? $.fn是指jquery的命名空间,加了fn的方法和属性,会对jquery的每一个实例有效. 换种说法来解释的话: jquery本身是一个类,有它的属性和方法,赤裸裸的"

基于jquery的has()方法以及与find()方法以及filter()方法的区别详解

1. has(selector选择器或DOM元素)   将匹配元素集合根据选择器或DOM元素为条件,检索该条件在每个元素的后代中是否存在,将符合条件的的元素构成新的结果集. 例子如下:<ul>  <li>list item 1</li>  <li>list item 2    <ul>      <li><div><span>a</span></div>list item 2-a<

Asp.net中JQuery、ajax调用后台方法总结

通过上一篇文章实例的实现,整个过程当中学习到很多知识点,了解了Jquery.Ajax在asp.net中的运用,加以总结,其实原理都是一样的,理解了一种,其他的注意很少的区别就可以了.灵活运用: 1.有参数的方法调用 示例代码如下:前台jQuery代码:$(function() {  知道的一种就是ajax调后台的方法. 1.有参数的方法调用 示例代码如下: 前台jQuery代码: [plain] view plaincopyprint? <span style="font-size:18p

jQuery 的 serializeArray()、serialize() 方法

serializeArray()方法说明: 实例 输出以数组形式序列化表单值的结果: $("button").click(function(){ x=$("form").serializeArray(); $.each(x, function(i, field){ $("#results").append(field.name + ":" + field.value + " "); }); }); 亲自试一

jQuery 中get 和post 方法传值注意事项

用 jQuery 的都知道,jQuery 的 get 和 post 方法有三个参数:地址,数据 和回调函数,但我们知道地址也可以跟随数据的(形如:get_data.php?v1=1&v2=2),而且第二个参数可以省略,即第二个参数可 以直接写回调函数,那么数据写在地址后面和写在 data 参数里有什么区别呢? 刚刚做了几个实验,看看下面的代码就清楚了:以下内容需要回复才能看到 jquery_data.php echo "post: ";print_r($_POST);echo