用 jQuery 替换 innerHTML

在 web 开发中，我们经常需要使用 JavaScript 动态地修改 DOM （Document Object Model）元素的内部 HTML 内容。一种常见的方式是使用 innerHTML 属性，直接将 HTML 字符串赋值给元素的 innerHTML 属性。不过，这种方式有时会带来一些安全隐患，可能会导致 XSS 攻击。

为了避免这种安全问题，我们可以使用 jQuery 的 html() 方法来替换元素的内部 HTML 内容。下面是如何用 jQuery 替换 innerHTML 的示例代码。

示例代码

HTML 代码

<div id="mydiv">
  <p>Hello, World!</p>
</div>

JavaScript 代码

// 使用 innerHTML 替换
document.getElementById("mydiv").innerHTML = "<p>Hello, JavaScript!</p>";

// 使用 jQuery 的 html() 方法替换
$("#mydiv").html("<p>Hello, jQuery!</p>");

在上面的示例代码中，我们定义了一个 div 容器元素，并使用 innerHTML 将元素内部的 p 标签的文本内容替换成了 Hello, JavaScript! ；接着，我们使用 jQuery 的 html() 方法，将容器元素内部的 p 标签的文本内容又替换成了 Hello, jQuery!。

总结

使用 jQuery 的 html() 方法替换元素的内部 HTML 内容，不仅可以避免 XSS 攻击，而且还非常方便快捷。在实际开发中，我们可以将之前使用 innerHTML 的代码改写成 jQuery 的代码，使我们的代码更加安全可靠、易于维护。