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>

效果：

jQuery（四）：HTML代码操作的更多相关文章

  1. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  2. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  3. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  4. jquery学习笔记---Dom操作

    一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可以分为DOM Core.HTML-D ...

  5. jQuery each、节点操作、动画演示、尺寸操作、扩展方法

    一.each 1.方式一:$.each(数组或者自定义对象,function(i,j){console.log(i,j)}) $.each(li,function(i,j){ console.log( ...

  6. [转]jQuery 选择器和dom操作

    居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...

  7. python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  8. jquery 中的dom操作

    jquery DOM 分为元素操作.属性操作.样式操作. 一.元素操作 1.查找 ①工具:jQuery选择器 2.创建和添加 ①代码格式:变量 = $('要创建的元素'): 注意点: 1 要使用标准的 ...

  9. 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  10. jQuery 的文档操作

    在 js 中也有DOM操作,也可以进行 增删改查 ,但是通过 js 的DOM操作会发现,我的天哪,代码好多.但是 jQuery的文档操作就少了很多. js 中 DOM 的示例 : var box = ...

随机推荐

  1. logstash日志分析的配置和使用（转）

    logstash是一个数据分析软件,主要目的是分析log日志.整一套软件可以当作一个MVC模型,logstash是controller层,Elasticsearch是一个model层,kibana是v ...

  2. django性能优化缓存view详解

    缓存提升性能: 1.通常的view会去数据库端执行相关的查询然后交由template渲染.数据库访问通常就是性能的瓶颈所在. 2.由于许多数据要很久才会变一次.两次连续的数据库访问通常返回的数据是一样 ...

  3. AD提高动态的方法（附SNR计算）

    作者:桂. 时间:2017-10-10  23:36:40 链接:http://www.cnblogs.com/xingshansi/p/7648475.html 前言 主要分析AD的基本特性,以及动 ...

  4. Centos7源代码安装freeswitch和启动freeswitch

    centos7下安装freeswitch版本:1.6. 1.下载源代码: 进入目录 cd /usr/local/src 克隆原代码 git clone -b v1.6 https://freeswit ...

  5. tips: javascript 参数传递含有空格怎么办？

    js 方法传参有时候会遇到空格,空格会报错,因为它会默认空格后是元素 解决方法就是使用 escape 和 unescape html: var title = escape(rowObject.tit ...

  6. Atitti python2.7安装 numpy attilax总结

    Atitti python2.7安装 numpy attilax总结 1.1. easy_install 安装模式,没有 easy_install ,先手动安装1 1.2. 安装setuptools ...

  7. Java之JDBC①

    JDBC工具准备:Mysql(数据库). MyEclipse(开发工具).Navicat(数据库管理工具) JDBC编程步骤·加载驱动程序:class.forName(driverClass);   ...

  8. [svc]nginx优化

    nginx的25条优化

  9. 深入理解Linux内核－系统调用

    系统调用:用户态进程向内核发出的,实现用户态进程调用硬件设备的函数或者中断:优点:使编程更容易,将用户从学习硬件设备的低级编程特性中解放:提高系统到安全性,内核在满足请求之前可以做正确性检查:提高可移 ...

  10. 行为类模式（八）：状态（State）

    定义 当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同状态的一系列类中,可以 ...