《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.5 技巧:更改元素的HTML内容

简介: 本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章,第3.5节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第3章,第3.5节,作者:【荷】Adriaan de Jonge , 【美】Phil Dutson著,更多章节内容可以访问云栖社区“异步社区”公众号查看

3.5 技巧:更改元素的HTML内容

为了能方便地操作HTML元素的innerHTML属性,jQuery提供了html()方法。代码清单3-5演示了它的用法。

代码清单3-5 选取一个段落元素并替换它的HTML内容

00 <!DOCTYPE html>
01 
02 <html lang="en">
03 <head>
04  <title>The html() function</title>
05 </head>
06 <body>
07  
08 <h2>Press the button to see the old HTML in the 
09  paragraph and replace it with new HTML</h2>
10  
11 <p>This <strong>contains</strong> some 
12  <a href="http://www.w3.org/TR/html5/">HTML</a> 
13  of its <em>own</em>.</p>
14 
15 <button>Change</button>
16 
17 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
18 
19 <script>
20 // 请将下列代码移至一个外部的.js文件中
21 $(document).ready(function() {
22 
23  $('button').click(function() {
24 
25   var p = $('p');
26 
27   alert('The old HTML was:\n' + p.html());
28 
29   p.html('<p>And that can be replaced with ' + 
30        '<em>simple</em> new HTML.</p>');
31 
32  });
33  
34 });
35 </script>
36 </body>
37 </html>

可以直接把HTML字符串传给html(),也可以传包含HTML的jQuery对象。html()较之innerHTML的主要好处是它可以直接操作jQuery选取集,而不用先把它转换成数组1。

相关文章
|
5天前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
23 1
|
5天前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
63 0
|
5天前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
10 1
|
7月前
|
JavaScript 前端开发
前端基础 -JQuery之val,text,html
前端基础 -JQuery之val,text,html
53 1
|
5天前
|
前端开发
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
38 0
|
5天前
|
JavaScript 前端开发 CDN
jQuery文件下载方法及引入HTML语法
去jQuery网站下载文件包,点击主页的“Download”之后,进入下载页面,可以选择production版本的进行下载,但是点击进去之后,浏览器并不会直接下载相关的文件,而是跳转到一个“密密麻麻”都是jQuery代码的页面,仔细查看浏览器地址栏中的url便可知,该页面其实就是jQuery的min版的文件,可以使用下面这种方法,下载jQuery文件
67 5
|
6月前
|
存储 JavaScript 前端开发
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
60 1
|
6月前
|
Web App开发 设计模式 JavaScript
基于html+jquery开发的科学计算器(课程作业)
基于html和jquery开发的科学计算器,该科学计算器可进行乘方、开方、指数、对数、三角函数、统计等方面的运算,又称函数计算器。 科学型带有所有普通的函数,所有的函数都分布在键盘上以致于你可以不用通过菜单列表来使用它们。
28 0
|
6月前
|
前端开发
element-ui+vue上传图片和评论现成完整html页面
element-ui+vue上传图片和评论现成完整html页面
43 1
|
7月前
|
XML JSON JavaScript
基于jquery+html开发的json格式校验工具
JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。
36 0