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

最新推荐文章于 2024-07-28 02:06:02 发布

qq_38184559

最新推荐文章于 2024-07-28 02:06:02 发布

阅读量428

点赞数

分类专栏：前端 jQery

前端同时被 2 个专栏收录

15 篇文章

订阅专栏

jQery

10 篇文章

订阅专栏

本文介绍了jQuery中append()和html()方法的区别及其使用场景。append()方法用于在选定元素的末尾追加内容，而html()方法则用于获取或设置选定元素的内容。通过实例演示了如何使用这两种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 元素的内容：

1

2

3

 
          $(
          ".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>"
          );
         
 
          }
         
 
          });
         
 
          });
         