innerHTML与jquery里的html()区别介绍

看个示例： 代码如下: var tbody=document.createElement(‘tbody’); tbody[removed]='<tr><td>IE下tbody的innerHTML是只读的</td></tr>’; //在IE下报错，目标对象错误 现在用jquery的html试试， 代码如下: $(tbody).html(‘<tr><td>IE下tbody的innerHTML是只读的</td></tr>’); 发现IE下用jquery能正确显示了，没任何问题。 后来查阅资料才知道，原来IE下tbody、tr这些的innerHTML都是只读的，不允许写入，而在其 innerHTML 和 jQuery 中的 `.html()` 方法都是用于操作 HTML 元素的内容，但它们在使用时有一些关键的区别，尤其是在处理特定浏览器兼容性问题时。 `innerHTML` 是一个原生的 JavaScript 属性，用于获取或设置一个元素的 HTML 内容。当你尝试用 `innerHTML` 设置元素的内容时，浏览器会解析提供的字符串并将其转换为实际的 DOM 结构。例如，如果你有一个空的 `tbody` 元素，并尝试用 `innerHTML` 设置包含表格行的 HTML 字符串，正常情况下这应该是可行的。然而，在 Internet Explorer 中，对于某些特定元素如 `tbody` 和 `tr`，`innerHTML` 在 IE 下是只读的，这意味着你不能直接通过 `innerHTML` 来写入内容，这样做会导致“目标对象错误”。 jQuery 的 `.html()` 方法是围绕 `innerHTML` 进行封装的，它提供了一种更一致的跨浏览器行为。在上面的例子中，当你尝试用 jQuery 的 `.html()` 方法在 IE 中设置 `tbody` 的内容时，jQuery 实际上使用了 `try...catch` 语句来捕获可能的错误。如果在尝试设置 `innerHTML` 时出现错误，jQuery 会退回到使用 `.empty().append(value)` 的方式来添加内容。这种方式绕过了 IE 对 `tbody` 和 `tr` 的限制，通过逐个添加子元素（`append`）来实现内容的更新。 如果你有一个 jQuery 对象，例如 `$("#responsediv")`，并且想要操作其 `innerHTML`，由于 jQuery 没有直接的 `innerHTML` 属性，你需要通过索引获取 DOM 元素，然后直接访问 `innerHTML`，如 `$("#responsediv")[0].innerHTML = msg`。 在使用 jQuery 的 `.html()` 方法时，你可以直接传递 HTML 字符串来替换元素的内容。然而，如果字符串包含可执行的 JavaScript 代码，浏览器可能会尝试执行这段代码，这可能导致安全风险。因此，通常建议避免在用户可控的输入中使用 `.html()`，除非你已经对输入进行了充分的验证和清理。 对于后加载广告的情况，`append` 方法是一个很好的选择，因为它可以将 HTML 字符串追加到现有元素的末尾，而不会替换原有的内容。例如，`$("#"+id).append(datastr)` 可以用来在元素中添加 Google 广告的代码。而百度广告的后加载，可以通过引入百度管家提供的 JavaScript 函数来实现，如 `BAIDU_CLB_fillSlotAsync`。 总结来说，`innerHTML` 和 `.html()` 主要区别在于浏览器兼容性和安全性。`.html()` 提供了更一致的跨浏览器体验，而 `innerHTML` 是原生的 JavaScript 特性，更直接但可能存在兼容性问题。在实际开发中，应根据项目需求和浏览器支持情况来选择合适的方法。