jQuery html()方法

html() 方法是 jQuery 中一个非常强大的工具，它允许你获取或设置匹配元素的 HTML 内容。无论是动态更新页面内容，还是读取现有内容以进行进一步处理，html() 方法都能提供极大的便利。

一、基本用法

1. 获取 HTML 内容： 使用 .html() 方法（不带参数）可以获取匹配元素的 HTML 内容。

   <div id="content">这是一个 <strong>示例</strong> div。</div>
   <button id="getHtmlButton">获取 HTML</button>
   
   <script>
       $(document).ready(function() {
           $("#getHtmlButton").click(function() {
               alert($("#content").html());
           });
       });
   </script>
   

2. 设置 HTML 内容： 使用 .html(content) 方法可以设置匹配元素的 HTML 内容。这里的 content 可以是任何有效的 HTML 字符串。

   <div id="content">这是一个 <strong>示例</strong> div。</div>
   <button id="setHtmlButton">设置 HTML</button>
   
   <script>
       $(document).ready(function() {
           $("#setHtmlButton").click(function() {
               $("#content").html("<p>新的 HTML 内容</p>");
           });
       });
   </script>
   

二、高级用法

1. 使用函数作为参数： .html() 方法还可以接受一个函数作为参数，该函数会针对每个匹配元素执行，并返回要设置的 HTML 内容。函数的返回值将作为新内容设置到元素中。

   <div class="item">Item 1</div>
   <div class="item">Item 2</div>
   <div class="item">Item 3</div>
   <button id="updateItemsButton">更新内容</button>
   
   <script>
       $(document).ready(function() {
           $("#updateItemsButton").click(function() {
               $(".item").html(function(index, oldHtml) {
                   return oldHtml + " - Updated!";
               });
           });
       });
   </script>
   

2. 结合事件处理： html() 方法通常与事件处理函数结合使用，以响应用户的交互操作，如按钮点击。

   <div id="dynamicContent">初始内容</div>
   <button id="changeContentButton">改变内容</button>
   
   <script>
       $(document).ready(function() {
           $("#changeContentButton").click(function() {
               $("#dynamicContent").html("<p>按钮被点击后更新的内容</p>");
           });
       });
   </script>
   

3. 注意事项：

   • 当使用 .html() 方法设置内容时，如果内容包含用户输入，请务必进行适当的转义，以防止 XSS（跨站脚本）攻击。
   • .html() 方法会替换目标元素内的所有现有内容。如果你只想添加或删除特定的子元素，可能需要使用 .append(), .prepend(), .after(), .before() 或 .remove() 方法。

三、总结

html() 方法是 jQuery 中用于操作 HTML 内容的一个基础且强大的工具。无论是读取现有内容还是动态更新页面，它都能提供简洁而高效的解决方案。通过掌握 html() 方法的基本和高级用法，你可以更灵活地控制网页内容，提升用户体验。

本文地址：https://www.tides.cn/p_jquery-html