如何在JavaScript中获取动态生成卡片元素的InnerText

核心方案 #

动态生成的元素需用事件委托绑定点击逻辑，同时通过类名而非ID定位目标元素（避免动态ID重复/歧义），或直接将数据存入按钮自定义属性，两种方式都能解决上下文丢失问题。

方案1：自定义属性存储数据（最直接） #

动态生成卡片时，把TestName和TestNum的值存入按钮的data-*属性，点击时直接读取：

// 动态生成卡片的函数示例
function renderTestCard(testData) {
    const cardHtml = `
        <div class="test-card">
            <div class="test-name">${testData.TestName}</div>
            <div class="test-num">${testData.TestNum}</div>
            <button class="select-btn" 
                    data-testname="${testData.TestName}" 
                    data-testnum="${testData.TestNum}">
                Select
            </button>
        </div>
    `;
    document.getElementById('card-container').innerHTML += cardHtml;
}

// 用事件委托绑定点击事件（兼容动态生成元素）
document.getElementById('card-container').addEventListener('click', function(e) {
    if (e.target.classList.contains('select-btn')) {
        // 直接从自定义属性取数据
        const testName = e.target.dataset.testname;
        const testNum = e.target.dataset.testnum;
        // 后续业务逻辑
        console.log('选中的测试项：', testName, testNum);
    }
});

方案2：通过父节点遍历获取元素（无需存额外数据） #

给卡片和内部元素统一加类名，点击按钮时先找到所属卡片容器，再通过类名定位目标元素：

// 动态生成卡片
function renderTestCard(testData) {
    const cardHtml = `
        <div class="test-card">
            <div class="test-name">${testData.TestName}</div>
            <div class="test-num">${testData.TestNum}</div>
            <button class="select-btn">Select</button>
        </div>
    `;
    document.getElementById('card-container').innerHTML += cardHtml;
}

// 事件委托绑定逻辑
document.getElementById('card-container').addEventListener('click', function(e) {
    if (e.target.classList.contains('select-btn')) {
        // 找到当前按钮所属的卡片容器
        const parentCard = e.target.closest('.test-card');
        if (parentCard) {
            // 通过类名获取对应元素的文本
            const testName = parentCard.querySelector('.test-name').innerText;
            const testNum = parentCard.querySelector('.test-num').innerText;
            console.log('选中的测试项：', testName, testNum);
        }
    }
});

踩坑排查点 #

• 不要用静态onclick="xxx()"绑定事件：动态生成元素的静态绑定会丢失上下文，优先用事件委托
• 检查类名拼写：确保.test-card、.test-name等类名在HTML和JS中完全一致
• 避免频繁用innerHTML +=拼接：大量卡片生成时建议用document.createElement或文档片段，提升性能同时避免事件丢失

内容的提问来源于stack exchange，提问作者C Cabdiraxman