html()
获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容。Contents:
- .html()
- html()
- .html(htmlString)
- html(htmlString)
- html(function(index, oldhtml))
html()
获取集合中第一个匹配元素的HTML内容
- .html()
- 这个方法不接收任何元素。
获取集合中第一个匹配元素的HTML内容
在一个 HTML 文档中,我们可以使用.html()
方法来获取任意一个元素的内容。如果选择器匹配多个元素,那么只有第一个匹配元素的 HTML 内容会被获取。考虑下面的代码:
$('div.demo-container').html();
下文的获取的<div>
的内容,必定是在文档中的第一个的div中获取的:
<div class="demo-container"> <div class="demo-box">Demonstration Box</div> </div>
结果如下:
<div class="demo-box">Demonstration Box</div>
这种方法使用浏览器的innerHTML
属性。有些浏览器返回的结果可能不是原始文档的 HTML 源代码。例如,如果属性值只包含字母数字字符,Internet Explorer有时丢弃包裹属性值的引号。
例子
点击段落将HTML转化为文本
<!DOCTYPE html> <html> <head> <style> p { margin:8px; font-size:20px; color:blue; cursor:pointer; } b { text-decoration:underline; } button { cursor:pointer; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <p> <b>Click</b> to change the <span id="tag">html</span> </p> <p> to a <span id="text">text</span> node. </p> <p> This <button name="nada">button</button> does nothing. </p> <script> $("p").click(function () {var htmlStr = $(this ).html(); $(this ).text(htmlStr); }); </script> </body> </html>
html(htmlString)
设置每一个匹配元素的html内容。
- .html(htmlString)
- htmlString类型: String。用来设置每个匹配元素的一个HTML 字符串。
- .html(function(index, oldhtml))
- function(index, oldhtml)类型:Function()。用来返回设置HTML内容的一个函数。接收元素的索引位置和元素原先的HTML作为参数。jQuery的调用这个函数之前会清空元素;使用oldhtml参数引用先前的内容。在这个函数中,
this
指向元素集合中的当前元素。
- function(index, oldhtml)类型:Function()。用来返回设置HTML内容的一个函数。接收元素的索引位置和元素原先的HTML作为参数。jQuery的调用这个函数之前会清空元素;使用oldhtml参数引用先前的内容。在这个函数中,
这个.html()
方法对 XML 文档无效.
我们可以使用.html()
来设置元素的内容,这些元素中的任何内容会完全被新的内容取代。此外,用新的内容替换这些元素前,jQuery从子元素删除其他结构,如数据和事件处理程序。(注:这样可以防止内存溢出。)
考虑以下的HTML:
<div class="demo-container"> <div class="demo-box">Demonstration Box</div> </div>
我们可以像这样设置<div>
的HTML内容:
$('div.demo-container') .html('<p>All new content. <em>You bet!</em></p>');
这行代码将替换<div>
里的所有内容
<div class="demo-container"> <p>All new content. <em>You bet!</em></p> </div>
在 jQuery 1.4中,.html()
方法允许我们通过函数来传递HTML内容。
$('div.demo-container').html(function () {var emph = '<em>' + $('p').length + ' paragraphs!</em>';return '<p>All new content for ' + emph + '</p>'; });
给定一个拥有6个段落的HTML文档,在这个例子中将设置<p>All new content for <em>6 paragraphs!</em></p>
为<div>
的新HTML内容。
这种方法使用浏览器的innerHTML
属性。有些浏览器可能不完全复制所提供的HTML源代码生成DOM。例如,Internet Explorer的版本8之前转换所有链接的href
属性为绝对URL路径,和Internet Explorer第9版之前,不增加一个单独的兼容层的情况下,将无法正确处理HTML5元素。
注意:在Internet Explorer中,包括第9版,设置HTML元素的文本内容可能会破坏其子节点的文本节点,结果导致子节点的文本节点从文档中被删除。如果你想保留这些 DOM 元素的引用,需要他们将保持不变,请使用.empty().html(string)
来代替.html(string)
,以便从文档中删除元素之前的元素被分配到新的字符串。
例子
为每个div设置一些内容。
<!DOCTYPE html> <html> <head> <style> .red { color:red; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <span>Hello</span> <div></div> <div></div> <div></div> <script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script> </body> </html>
添加了一些html到每个div,然后立刻做进一步的操作来插入的HTML。
<!DOCTYPE html> <html> <head> <style> div { color:blue; font-size:18px; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <div></div> <div></div> <div></div> <script> $("div").html("<b>Wow!</b> Such excitement..."); $("div b").append(document.createTextNode("!!!")) .css("color", "red"); </script> </body> </html>