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

相关文章
|
2月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
21天前
|
前端开发
HTML代码示例
HTML代码示例
21 1
|
27天前
|
JSON 前端开发 JavaScript
从假数据到动态表格:一个简单的JavaScript和HTML示例
从假数据到动态表格:一个简单的JavaScript和HTML示例
|
2月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1
|
2月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
10 0
|
2月前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
11 0
|
2月前
|
JavaScript 索引
jQuery选择器 获取元素的十一种方式
jQuery选择器 获取元素的十一种方式
|
3月前
|
移动开发 HTML5 容器
HTML5响应式网页设计——核心技能考核示例(用于2022年11月H5考核)
HTML5响应式网页设计——核心技能考核示例(用于2022年11月H5考核)
28 0
|
4月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
21 0
|
4月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
42 0