JavaScript 中访问和操作 innerHTML 中的 HTML 元素-html教程-PHP中文网

JavaScript 中访问和操作 innerHTML 中的 HTML 元素

碧海醫心

发布： 2025-10-19 09:28:25

原创

372人浏览过

javascript 中访问和操作 innerhtml 中的 html 元素

本文将介绍如何使用 JavaScript 访问和操作通过 `innerHTML` 动态添加到 DOM 中的 HTML 元素。我们将探讨使用 `DOMParser` 的方法，并通过示例代码演示如何修改这些元素的样式。同时，也会讨论使用 `forEach` 循环时获取索引的更简洁方式。

访问和操作 innerHTML 中的元素

在使用 JavaScript 操作 DOM 时，经常会遇到需要动态生成 HTML 内容并将其添加到页面中的情况。innerHTML 属性是一种常用的方法，它可以将字符串解析为 HTML 并插入到指定的元素中。然而，直接使用 innerHTML 添加的元素可能无法立即被 JavaScript 访问到，导致出现类似 "TypeError: Cannot read properties of undefined (reading 'style')" 的错误。

以下是一种解决此问题的方法：使用 DOMParser。

使用 DOMParser 解析 HTML 字符串

DOMParser 接口提供了解析 HTML 或 XML 字符串并返回 DOM Document 的能力。通过 DOMParser，我们可以将 HTML 字符串解析成一个 DOM 树，然后像操作普通 DOM 元素一样操作它。

立即学习“Java免费学习笔记（深入）”；

示例代码：

假设我们有以下 HTML 结构需要动态添加到页面中：

<div id="rulesWrapper"></div>

登录后复制

以及以下数据：

const ruleData = [
    { title: "Rule 1", body: "This is the first rule." },
    { title: "Rule 2", body: "This is the second rule." }
];

const rulesWrapper = document.getElementById('rulesWrapper');
let counter = 0;

登录后复制

现在，我们将使用 DOMParser 将 HTML 字符串解析成 DOM 元素，并添加到 rulesWrapper 中：

百度文心百中

百度大模型语义搜索体验中心

查看详情

ruleData.forEach((rule) => {
    let rule_html = `
        <div class='rule'>
            <div id='rule-title' class='rule-title' onclick='showRuleDetail(${counter})'>
                <div>
                    <p>${counter}.</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>
        </div>
    `;
    let parser = new DOMParser();
    let doc = parser.parseFromString(rule_html, "text/html");
    let ruleElement = doc.body.firstChild; // 获取解析后的元素

    ruleElement.querySelector('.rule-body').style.background = 'red'; // 修改样式
    rulesWrapper.appendChild(ruleElement);
    counter++;
});

登录后复制

代码解释：

我们首先定义了一个 HTML 字符串 rule_html，它包含了要动态添加的 HTML 结构。
然后，我们创建了一个 DOMParser 实例。
使用 parseFromString() 方法将 HTML 字符串解析成一个 DOM Document。
从 Document 的 body 中获取第一个子元素，即解析后的 HTML 元素。
使用 querySelector() 方法选择 rule-body 类名的元素，并修改其 background 样式。
最后，使用 appendChild() 方法将解析后的元素添加到 rulesWrapper 中。

使用 forEach 获取索引

在上面的代码中，我们使用了一个 counter 变量来记录循环的索引。实际上，forEach 方法可以直接提供索引值，从而避免手动维护 counter 变量。

示例代码：

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>
        </div>
    `;
    let parser = new DOMParser();
    let doc = parser.parseFromString(rule_html, "text/html");
    let ruleElement = doc.body.firstChild;

    ruleElement.querySelector('.rule-body').style.background = 'red';
    rulesWrapper.appendChild(ruleElement);
});

登录后复制

代码解释：

forEach 方法的第一个参数是数组的元素，第二个参数是元素的索引。我们可以直接使用 index 变量来代替 counter 变量，并将其传递给 showRuleDetail() 函数。

总结

通过使用 DOMParser，我们可以方便地访问和操作通过 innerHTML 动态添加到 DOM 中的 HTML 元素。同时，使用 forEach 方法的索引参数可以简化循环逻辑，提高代码的可读性。在实际开发中，应根据具体情况选择合适的方法来操作 DOM 元素，以提高代码的效率和可维护性。

注意事项：

DOMParser 的 parseFromString() 方法的第二个参数指定了要解析的字符串的类型。对于 HTML 字符串，应使用 "text/html"。对于 XML 字符串，应使用 "text/xml"。
在使用 querySelector() 方法选择元素时，应确保选择器是正确的，并且元素已经添加到 DOM 中。
动态添加大量 HTML 元素可能会影响页面的性能。应尽量减少动态添加元素的数量，并考虑使用其他优化方法，例如虚拟 DOM。

以上就是JavaScript 中访问和操作 innerHTML 中的 HTML 元素的详细内容，更多请关注php中文网其它相关文章！