开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery 触发别的元素事件
$(function(){ $('#btn').bind("myClick", function(){ $('#test').append("我的自定义事件."); }); $('#btn').
414 0
jquery 触发别的元素事件,并且传递参数
$(function(){ $('#btn').bind("myClick", function(event, message1, message2){ $('#test').
438 0
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
0 0
【jquery Ajax】接口的学习与Postcode插件的使用
【jquery Ajax】接口的学习与Postcode插件的使用
0 0
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
0 0
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
0 0
NET MVC第七章、jQuery插件验证
NET MVC第七章、jQuery插件验证
0 0
编写自定义的JQuery插件的几个注意点
编写自定义的JQuery插件的几个注意点
0 0
关于JQuery validate表单校验插件对级联下拉框的校验问题
关于JQuery validate表单校验插件对级联下拉框的校验问题
0 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
《零基础HTML入门教程》
立即下载
使用TensorFlow搭建智能开发系统自劢生成App UI代码
立即下载
使用TensorFlow搭建智能开发系统自动生成App UI
立即下载