本文介绍了如何使用 JavaScript 操作通过 `innerHTML` 动态添加到页面中的 HTML 元素。重点讲解了使用 `DOMParser` 解析 HTML 字符串，以及如何通过 `querySelector` 方法选取目标元素并修改其样式。同时，也提供了使用 `forEach` 循环的索引来简化代码的建议。
在使用 JavaScript 操作动态生成的 HTML 内容时，直接通过 document.querySelectorAll 可能无法立即获取到通过 innerHTML 添加的元素，导致类似 “TypeError: Cannot read properties of undefined (reading ‘style’)” 的错误。 这是因为在 innerHTML 更新后，DOM 可能没有立即完成更新。 以下介绍一种解决方案，使用 DOMParser 来解析 HTML 字符串，从而更有效地操作动态生成的 HTML 元素。
使用 DOMParser 解析 HTML
DOMParser 是一个可以将 HTML 或 XML 字符串解析为 DOM 文档的接口。 通过使用 DOMParser，我们可以将要添加到 innerHTML 的 HTML 字符串转换为 DOM 节点，然后对这些节点进行操作，最后再将它们添加到页面中。
立即学习“Java免费学习笔记（深入）”；
以下是一个示例，展示了如何使用 DOMParser 来修改动态生成的 HTML 元素的背景颜色：
ruleData.forEach((rule, index) => { let rule_html = ` `; let parser = new DOMParser(); let ruleElement = parser.parseFromString(rule_html, "text/html").body.firstChild; // Use "text/html" and get the first child of the body if (ruleElement) { let ruleBody = ruleElement.querySelector('.rule-body'); if (ruleBody) { ruleBody.style.background = 'red'; } rulesWrapper.appendChild(ruleElement); }});
代码解释：
创建 HTML 字符串： 首先，我们创建一个包含 HTML 结构的字符串 rule_html。创建 DOMParser 实例： 创建一个 DOMParser 的实例。解析 HTML 字符串： 使用 parser.parseFromString(rule_html, “text/html”) 将 HTML 字符串解析为一个 DOM 文档。 注意这里使用 “text/html” 作为参数，并获取返回文档的 body 的第一个子元素，这是解析后的实际 HTML 元素。选取目标元素： 使用 ruleElement.querySelector(‘.rule-body’) 在解析后的 DOM 结构中选取类名为 rule-body 的元素。修改样式： 如果找到了目标元素，则修改其 background 样式。添加到页面： 最后，使用 rulesWrapper.appendChild(ruleElement) 将修改后的 DOM 节点添加到页面中的 rulesWrapper 元素中。
使用 forEach 的索引
在上面的示例中，我们使用了一个额外的 counter 变量来跟踪循环的索引。 实际上，forEach 方法提供了第二个参数，即当前元素的索引。 我们可以直接使用这个索引来简化代码：
ruleData.forEach((rule, index) => { // ... 使用 index 代替 counter ${index + 1}.
${rule.title}
// ...});
总结与注意事项
使用 DOMParser 可以有效地操作动态生成的 HTML 元素，避免直接操作字符串可能带来的问题。确保在使用 querySelector 之前，DOM 已经完成更新。利用 forEach 提供的索引参数可以简化代码，避免手动维护计数器。在解析 HTML 字符串时，务必使用 “text/html” 作为 parseFromString 的第二个参数，并正确获取解析后的 HTML 元素。在将解析后的元素添加到页面之前，进行必要的错误处理和判断，例如检查 ruleElement 和 ruleBody 是否为 null。
通过以上方法，您可以更有效地操作通过 innerHTML 动态添加到页面中的 HTML 元素，并避免常见的错误。
以上就是JavaScript 中操作 innerHTML 内部的 HTML 标签的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1586300.html
微信扫一扫
支付宝扫一扫
