描述: 获取集合中第一个匹配元素的HTML内容
-
添加的版本: 1.0.html()
-
这个方法不接收任何元素。
-
获取集合中第一个匹配元素的HTML内容
在一个 HTML 文档中, 我们可以使用 .html()
方法来获取任意一个元素的内容。 如果选择器匹配多个元素,那么只有第一个匹配元素的 HTML 内容会被获取。 考虑下面的代码:
1
|
|
下文的获取的<div>
的内容, 必定是在文档中的第一个class="demo-container"
的div中获取的:
1
2
3
|
|
结果如下:
1
|
|
这种方法使用浏览器的innerHTML
属性。有些浏览器返回的结果可能不是原始文档的 HTML 源代码。例如,如果属性值只包含字母数字字符,Internet Explorer有时丢弃包裹属性值的引号。
例子:
点击段落将HTML转化为文本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
|
描述: 设置每一个匹配元素的html内容。
-
添加的版本: 1.0.html( htmlString )
-
htmlString类型: String用来设置每个匹配元素的一个HTML 字符串。
-
-
添加的版本: 1.4.html( function(index, oldhtml) )
-
function(index, oldhtml)类型: Function()用来返回设置HTML内容的一个函数。接收元素的索引位置和元素原先的HTML作为参数。jQuery的调用这个函数之前会清空元素;使用oldhtml参数引用先前的内容。在这个函数中,
this
指向元素集合中的当前元素。
-
这个 .html()
方法对 XML 文档无效.
我们可以使用 .html()
来设置元素的内容,这些元素中的任何内容会完全被新的内容取代。此外,用新的内容替换这些元素前,jQuery从子元素删除其他结构,如数据和事件处理程序。(注:这样可以防止内存溢出。)
考虑以下的HTML:
1
2
3
|
|
我们可以像这样设置 <div class="demo-container">
的HTML内容:
1
2
|
|
这行代码将替换 <div class="demo-container">
里的所有内容
1
2
3
|
|
在 jQuery 1.4中, .html()
方法允许我们通过函数来传递HTML内容。
1
2
3
4
|
|
给定一个拥有6个段落的HTML文档,在这个例子中将设置 <p>All new content for <em>6 paragraphs!</em></p>
为<div class="demo-container">
的新HTML内容。
这种方法使用浏览器的innerHTML
属性。有些浏览器可能不完全复制所提供的HTML源代码生成DOM。例如,Internet Explorer的版本8之前转换所有链接的href
属性为绝对URL路径,和Internet Explorer第9版之前,不增加一个单独的兼容层的情况下,将无法正确处理HTML5元素。
注意: 在Internet Explorer中,包括第9版, 设置HTML元素的文本内容可能会破坏其子节点的文本节点,结果导致子节点的文本节点从文档中被删除。如果你想保留这些 DOM 元素的引用,需要他们将保持不变,请使用.empty().html(string)
来代替.html(string)
,以便从文档中删除元素之前的元素被分配到新的字符串。
例子:
Example: 为每个div设置一些内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
|
Example: 添加了一些html到每个div,然后立刻做进一步的操作来插入的HTML。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
|
转载请注明:悠然品鉴 » jQuery .html() 用法 手册 | 示例代码