jQuery html() 方法用于设置或返回被选元素的内容(innerHTML)。
$(selector).html(content); // 设置被选元素的内容 $(selector).html(); // 返回被选元素的内容
当使用 html() 方法时,如果没有参数,则返回被选元素的当前内容。如果使用了参数,则会将参数作为新的内容来设置被选元素。
html() 方法可以用来替代 innerHTML 属性。但是,与 innerHTML 属性不同,html() 方法不会返回文本和注释节点。
// 返回This is a test的内容 $("#test").html(); // This is a test
除了字符串外,html() 方法也可以接受一个函数作为参数。该函数将在每个匹配元素上执行,并将当前元素作为上下文传递。函数返回值将作为新的 HTML 内容来设置匹配元素。
// 返回This is a test., 加上一些文本 $("#test").html(function(){ return "Test: " + $(this).text(); }); // Test: This is a test.
此外,jQuery html() 方法也可以用来动态地加载 HTML 内容到页面中。例如:
.load() 方法加载 HTML 内容并插入到 DOM 中 $("#result").load("demo_test.txt");
jQuery 选择器
html()
函数用于设置或返回当前jQuery对象所匹配的DOM元素内的html内容。
该函数的用途相当于设置或获取DOM元素的innerHTML
属性值。
该函数属于jQuery
对象(实例)。
参数 | 描述 |
---|---|
htmlString | 可选/String/Function类型 用于设置的html字符串。 |
如果没有指定htmlString
参数,则表示获取第一个匹配元素的html内容;如果指定了htmlString
参数,则表示设置所有匹配元素的html内容。
jQuery 1.4 新增支持:参数htmlString
可以为函数。html()
将根据匹配的所有元素遍历执行该函数,函数中的this
将指向对应的DOM元素。
html()
还会为函数传入两个参数:第一个参数就是该元素在匹配元素中的索引,第二个参数就是该元素当前的html内容。函数的返回值就是需要为该元素设置的html内容。
如果参数htmlString
不是字符串或函数类型,则会被转换为字符串类型( toString() )。如果参数为null
或undefined
,则将其视作空字符串("")。
html()
函数的返回值是String/jQuery类型,返回值的实际类型取决于html()
函数所执行的操作。
如果html()
函数执行的是设置操作,将返回当前jQuery对象本身。如果执行的是获取操作,将返回第一个匹配元素的html内容,该值为字符串类型。
以下面这段代码为例:
点击 "尝试一下" 按钮查看在线实例
jQuery 选择器
jQuery 选择器 (prev ~ siblings) jQuery 选择器定义和用法jQuery的prev ~ siblings选择器用于匹配prev元素之后的所有同辈的sibl...
jQuery prop() 方法jQuery HTML/CSS 方法实例 添加并移除名为 "color" 的属性:$("button").click(function(){ var $x = $("div"...
jQuery - 设置内容和属性 设置内容 - text()、html() 以及 val()我们将使用前一章中的三个相同的方法来设置内容:text() - 设置...
jQuery mouseup() 方法jQuery 事件方法实例 在 div 元素上松开鼠标左键,插入一些文本:$("div").mouseup(function(){ $(this).a...
在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法。...