jQuery 文档操作 - html() 方法

实例

设置所有 p 元素的内容:

$(".btn1").click(function(){
$("p").html("Hello <b>world</b>!");
});

亲自试一试

定义和用法

html() 方法返回或设置被选元素的内容 (inner HTML)。

如果该方法未设置参数,则返回被选元素的当前内容。

返回元素内容

当使用该方法返回一个值时,它会返回第一个匹配元素的内容。

语法

$(selector).html()

亲自试一试

设置元素内容

当使用该方法设置一个值时,它会覆盖所有匹配元素的内容。

语法

$(selector).html(content)


亲自试一试

参数 描述
content 可选。规定被选元素的新内容。该参数可包含 HTML 标签。

使用函数来设置元素内容

使用函数来设置所有匹配元素的内容。

语法

$(selector).html(function(index,oldcontent))

亲自试一试

参数 描述
function(index,oldcontent)

规定一个返回被选元素的新内容的函数。

  • index - 可选。接收选择器的 index 位置。

oldcontent - 可选。接收选择器的当前内容。

这里我们尝试一下img标签呐?

HTML jQuery 文档操作 - html() 方法的更多相关文章

  1. jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法

    原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp   实例 使用 noConflict() 方法为 jQuery 变量规定新 ...

  2. jQuery 文档操作 - remove() 方法

    移除所有 <p> 元素: 定义和用法 remove() 方法移除被选元素,包括所有文本和子节点. 该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素. ...

  3. jQuery 文档操作 - html() 方法

    1.转自:http://www.w3school.com.cn/jquery/manipulation_html.asp 设置所有 p 元素的内容: <html> <head> ...

  4. jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  5. jQuery文档操作

    jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...

  6. jQuery 文档操作 - prependTo() ,appendTo()方法

    其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...

  7. 前端之JQuery:JQuery文档操作

    jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color&qu ...

  8. jQuery文档操作--append()、prepend()、after()和before()

       append(content|fn)  概述 向每个匹配的元素内部追加内容,这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似 参数    content  要追 ...

  9. jQuery 文档操作 - insertAfter() ,insertBefore(),after(),before() 方法

    这个方法跟prependTo()和appendTo()不一样的地方在于,一个是仍然插入到元素内部,而insertAfter和insertBefore是插入到元素外部. 这里拿insertBefore来 ...

随机推荐

  1. Python之模块IO

    目录 Python之模块IO io概叙 io类层次结构 io模块的类图 io模块的3种I/O 原始I/O,即RawIOBase及其子类 文本I/O,即TextIOBase及其子类 字节I/O(缓存I/ ...

  2. Jconsole与Jmx 分析JVM状况(下) 转

    出处: Jconsole与Jmx 分析JVM状况(下) 线程(ThreadMXBean ) 从 Jconsole 画面取得线程画面如下: 左下角列出了所以正在运行的线程.通过点击某个线程,右下脚可以看 ...

  3. Java NIO浅析 转至 美团技术团队

    出处: Java NIO浅析 NIO(Non-blocking I/O,在Java领域,也称为New I/O),是一种同步非阻塞的I/O模型,也是I/O多路复用的基础,已经被越来越多地应用到大型应用服 ...

  4. 移动端、pc端通用点击复制

    点击复制 function copyArticle(event){ const range = document.createRange(); range.selectNode(document.ge ...

  5. java中的compareto方法的详细介绍

    java中的compareto方法的详细介绍 Java Comparator接口实例讲解(抽象方法.常用静态/默认方法) 一.java中的compareto方法 1.返回参与比较的前后两个字符串的as ...

  6. Java一些小例子

    package com.example.demo; public class Solution { public static void main(String[] args) { func(); } ...

  7. Ubuntu 18.04 LTS 64位Linux搭建Kubernetes 1.15.3并join子节点的完整过程

    1.软件准备 1.1.Ubuntu系统安装 https://ubuntu.com/download#download ubuntu系统需要设置用户,root默认为系统的账户不能被用户设置且每一次开机都 ...

  8. linux的一些运维操作基本知识

    1 ~/.bashrc 这个可以认为是linux系统的启动项,每次启动的时候都会运行一些这里边的命令: 常见的有: alias rm='rm -i'//修改某些指令: export LD_LIBRAR ...

  9. Java语言基础(5)

    1 if-else语句(二) 案例:Demo1~Demo4 import java.util.Scanner; public class Demo1 { //在main方法中,从控制台输入任意的一个整 ...

  10. Can you answer these queries? HDU - 4027 (线段树,区间开平方,区间求和)

    A lot of battleships of evil are arranged in a line before the battle. Our commander decides to use ...