JavaScript 中操作 innerHTML 内部的 HTML 标签-html教程-PHP中文网

JavaScript 中操作 innerHTML 内部的 HTML 标签

碧海醫心

发布： 2025-10-19 11:56:24

原创

707人浏览过

javascript 中操作 innerhtml 内部的 html 标签

本文介绍了如何使用 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 = `
        <div class='rule'>
            <div id='rule-title' class='rule-title' onclick='showRuleDetail(${index})'>
                <div>
                    <p>${index + 1}.</p>
                    <p>${rule.title}</p>
                </div>
                <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.5 5.5L7.5 10.5L12.5 15.5" stroke="#1E1E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class='rule-body'>
                <p>${rule.body}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10931">
                            <img src="https://img.php.cn/upload/webcode/000/000/007/176433120262103.jpg" alt="诚石C2C交易系统">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10931">诚石C2C交易系统</a>
                            <p>1. 页面全部经过SEO(搜索引擎优化)处理   2. 支持IE、FireFox等主流浏览器，在IE 和FireFox下显示相同的效果   3. 符合W3C国际网页标准，页面全部采用DIV+CSS布局   4. 采用SQL server数据库，所有数据库操作采用存储过程   5. 部分功能采用AJAX技术，良好的用户体验。   6. 后台集成在线HTML编辑软件FCKEditor，自定义美观的内容</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="诚石C2C交易系统">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10931" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="诚石C2C交易系统">
                        </a>
                    </div>
                
            </div>
        </div>
    `;

    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
  <div id='rule-title' class='rule-title' onclick='showRuleDetail(${index})'>
     <div>
       <p>${index + 1}.</p>
       <p>${rule.title}</p>
     </div>
  // ...
});

登录后复制

总结与注意事项