javascript - 无法获取通过 JavaScript 添加的 HTML 元素

Question

如标题所述，我无法访问使用 JavaScript 添加的 HTML 元素。在使用 JavaScript 添加 HTML div 之后，我试图使用 document.getElementById('sampleID') 获取 DOM 元素。但是，HTML 源代码并未反射(reflect)所做的更改，因此我实际上无法获取新元素。

该应用程序与 ToDo 列表非常相似，但它跟踪的是应用程序而不是任务。每个提交的应用程序的 div 中都有一个复选框，POST 请求仍然通过，从而从数据库中删除该应用程序，但直到刷新后才反射(reflect)在页面中。

我偶然发现的唯一相关概念是 JavaScript 的 MutationObserver 接口(interface)，它似乎不允许访问添加的元素。

感谢所有建议!

$('#applicationDelete').submit(function(event) {
    event.preventDefault(); // Stops browser from navigating away from page
    var names = [];
    $(":checkbox").each(function () {
        var isChecked = $(this).is(":checked");
        if (isChecked) {
            names.push($(this).attr("class"));
        }
    });
    var data = { names: names }
    console.log('Data: ' + names);
    $.ajax({
        type: 'POST',
        contentType: 'application/json',
        url: window.location + 'applications/delete',
        data: JSON.stringify(data),
        dataType: 'json',
        success: function(res) {
            if (res.response == 'success') {
                var application;
                for (i in names) {
                    application = document.getElementById(names[i]);
                    application.parentNode.removeChild(application);
                }
            }
        }
    });
});

编辑:

function addApplication(application) {
    const container = document.getElementsByClassName('applicationDelete')[0];
    const appWrap = document.createElement('div');
    appWrap.classList.add('application-wrapper');

    // ADDED THIS LINE THANKS TO SUGGESTIONS!
    appWrap.id = application.company;

    const checkbox = document.createElement('div')
    checkbox.classList.add('checkbox');
    const check = document.createElement('input');
    check.type = 'checkbox';
    check.classList.add(application.company);
    const app = document.createElement('div')
    app.classList.add('application');

    checkbox.appendChild(check);
    appWrap.appendChild(checkbox);
    appWrap.appendChild(app);
    container.insertBefore(appWrap, container.childNodes[3]);

    app.innerHTML = '\
    Company: ' + application.company + '<br>\
    Position: ' + application.position + '<br>\
    Experience: ' + application.experience + '<br>\
    Source: ' + application.source + '<br>';

为意大利面条代码道歉!我确信我对类和 ID 的使用与正确的编码约定相去甚远，但你们仍然设法发现了我的错误(甚至没有看到 addApplication 方法)。谢谢!

Answer 1

你正在用这个将类名添加到名称数组。

names.push($(this).attr("class"));

并通过 id 检索元素。

application = document.getElementById(names[i]);

您应该将 id 存储在名称数组中(我也会为该数组选择不同的名称，它建议您存储名称)。

 names.push($(this).attr("id"));

或者获取具有以下其中一项的元素。

document.getElementsByClassName(names[i]); //returns array

document.querySelector('.' + names[i]); //returns dom element

$('.' + names[i]); //returns jQuery object.

由于您使用 jQuery，我建议使用 jQuery 解决方案。