《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。

相关文章
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
57 0
|
2天前
|
前端开发
HTML代码示例
HTML代码示例
10 1
|
29天前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1
|
6月前
|
JavaScript 前端开发
前端基础 -JQuery之val,text,html
前端基础 -JQuery之val,text,html
50 1
|
2月前
|
移动开发 HTML5 容器
HTML5响应式网页设计——核心技能考核示例(用于2022年11月H5考核)
HTML5响应式网页设计——核心技能考核示例(用于2022年11月H5考核)
28 0
|
2月前
|
前端开发
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
30 0
|
3月前
|
JavaScript 前端开发 CDN
jQuery文件下载方法及引入HTML语法
去jQuery网站下载文件包,点击主页的“Download”之后,进入下载页面,可以选择production版本的进行下载,但是点击进去之后,浏览器并不会直接下载相关的文件,而是跳转到一个“密密麻麻”都是jQuery代码的页面,仔细查看浏览器地址栏中的url便可知,该页面其实就是jQuery的min版的文件,可以使用下面这种方法,下载jQuery文件
64 5
|
4月前
|
数据采集 数据安全/隐私保护
HTML表单标签和表单项标签示例
HTML表单标签和表单项标签示例
29 1
|
4月前
|
前端开发
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
HTML图片音频视频标签、超链接标签、列表标签和布局标签示例
45 0
|
5月前
|
存储 JavaScript 前端开发
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
Jquery 如何获取子元素。如何找到所有 HTML select 标签的选中项。jQuery 里的 ID 选择器和 class 选择器有何不同
42 1