当前位置: 首页 > news >正文

jQuery(四):HTML代码操作

html()可以对HTML代码进行操作,类似于元素JavaScript中的innerHTML。

例如:

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html()操作</title>
    <style>
       *{
           margin: 0px;
           padding: 0px;
       }
       input{
           display: block;
           float: left;
       }
    </style>
    <!--引入jQuery-->
    <script src="../jquery-3.3.1.js"></script>
    <!--javascript-->
    <script>
       $(function(){
            $("#btnGet").click(function(){
                var html=$("div.left").html();
                alert(html);
             });
             $("#btnSet").click(function(){
                var html=$("div.left").html("<div style='border:1px solid red;'><p>这是一个段落</p></div>");
             });
       });
    </script>
</head>
<body>
    <div id="mainbox">
         <h1>飘飞雨絮</h1>
         <div class="left">
             <img src="../qq.jpg" width="150" height="150"/>
             <br />
         </div>
    </div>
    <input type="button" id="btnGet" value="获取html()内容" style="margin-right:10px;" />
    <input type="button" id="btnSet" value="单击改变内容" />
</body>
</html>

 

效果:

相关文章:

  • SVN使用教程之-分支/标记 合并 subeclipse
  • leetcode341
  • Java编译时出现的一个编译错误
  • citus实战系列之四多CN部署
  • mysqlbinlog恢复数据-update20140820
  • 转: 利用RabbitMQ、MySQL实现超大用户级别的消息在/离线收发
  • alibaba笔试2
  • python爬取网站数据,如何绕过反爬虫策略
  • [OGRE]看备注学编程(02):打地鼠01-布置场地九只地鼠
  • 巧用 TypeScript (一)
  • 谁在使用MongoDB
  • 精选Excel之Ctrl+26字母快捷键,职场办公人员必会!
  • mac下搭建java开发环境:eclipse+tomcat+maven
  • 分布式id生成
  • Android Day1
  • 《深入 React 技术栈》
  • Angular数据绑定机制
  • CentOS 7 防火墙操作
  • co模块的前端实现
  • EOS是什么
  • EventListener原理
  • Java新版本的开发已正式进入轨道,版本号18.3
  • Python学习之路13-记分
  • React组件设计模式(一)
  • 从零开始的无人驾驶 1
  • 复杂数据处理
  • 给github项目添加CI badge
  • 如何用vue打造一个移动端音乐播放器
  • 手写一个CommonJS打包工具(一)
  • #!/usr/bin/python与#!/usr/bin/env python的区别
  • #Linux杂记--将Python3的源码编译为.so文件方法与Linux环境下的交叉编译方法
  • #NOIP 2014#day.2 T1 无限网络发射器选址
  • (1/2)敏捷实践指南 Agile Practice Guide ([美] Project Management institute 著)
  • (delphi11最新学习资料) Object Pascal 学习笔记---第7章第3节(封装和窗体)
  • (LeetCode 49)Anagrams
  • (Oracle)SQL优化技巧(一):分页查询
  • (翻译)terry crowley: 写给程序员
  • (附源码)springboot电竞专题网站 毕业设计 641314
  • (三)Honghu Cloud云架构一定时调度平台
  • (转)Groupon前传:从10个月的失败作品修改,1个月找到成功
  • (转)Scala的“=”符号简介
  • (转)用.Net的File控件上传文件的解决方案
  • . Flume面试题
  • ..回顾17,展望18
  • .NET 中的轻量级线程安全
  • .NET 中使用 Mutex 进行跨越进程边界的同步
  • .NET/C# 项目如何优雅地设置条件编译符号?
  • .NetCore Flurl.Http 升级到4.0后 https 无法建立SSL连接
  • .NET连接MongoDB数据库实例教程
  • .NET中GET与SET的用法
  • .NET中使用Protobuffer 实现序列化和反序列化
  • @RequestBody与@ModelAttribute
  • [Bugku]密码???[writeup]
  • [BZOJ5250][九省联考2018]秘密袭击(DP)
  • [C#]C# OpenVINO部署yolov8图像分类模型