Question

有人能帮我解决这个消息错误吗？

“未捕获的 DOMException：无法在 'Node' 上执行 'insertBefore'：要在其之前插入新节点的节点不是该节点的子节点。在 HTMLButtonElement。”

当我单击“添加另一个图像”按钮时，控制台上会出现此消息。

我不会 javascript，但我需要在我的 Django（一个 Python 框架）应用程序中使用此代码来创建动态表单。我在本教程 https://engineertodeveloper.com/dynamic-formsets-with-django/ 中选择了这段代码。我的模板与教程的模板几乎相同。两者的区别在于我的表单集需要填写三个字段，而教程的表单集（不是主表单）只有一个字段。

https://engineertodeveloper.com/dynamic-formsets-with-django/ 的 JavaScript 代码：

const imageForm = document.getElementsByClassName("image-form");
const mainForm = document.querySelector("#pet_form");
const addImageFormBtn = document.querySelector("#add-image-form");
const submitFormBtn = document.querySelector('[type="submit"]');
const totalForms = document.querySelector("#id_form-TOTAL_FORMS");

let formCount = imageForm.length - 1;

function updateForms() {
    let count = 0;
    for (let form of imageForm) {
        const formRegex = RegExp(`form-(\\d){1}-`, 'g');
        form.innerHTML = form.innerHTML.replace(formRegex, `form-${count++}-`)
    }
}

addImageFormBtn.addEventListener("click", function (event) {
    event.preventDefault();

    const newImageForm = imageForm[0].cloneNode(true);
    const formRegex = RegExp(`form-(\\d){1}-`, 'g');

    formCount++;

    newImageForm.innerHTML = newImageForm.innerHTML.replace(formRegex, `form-${formCount}-`);
    mainForm.insertBefore(newImageForm, submitFormBtn);
    totalForms.setAttribute('value', `${formCount + 1}`);
});

mainForm.addEventListener("click", function (event) {
    if (event.target.classList.contains("delete-image-form")) {
        event.preventDefault();
        event.target.parentElement.remove();
        formCount--;
        updateForms();
        totalForms.setAttribute('value', `${formCount + 1}`);
    }
});

我的 Django 模板：

<div class="row">
    <div class="col-6 offset-md-3">
        <form id="pet_form" method="post" action="." enctype="multipart/form-data">

            {% csrf_token %}
        
            {{ form_membro|crispy }}
        
            {{ formset.management_form }}
            {% for form in formset %}
            <div class="image-form d-flex justify-content-between">
                {{ form.nome_usuario }}
                {{ form.cpf }}
                {{ form.lattes }}
                <button class="align-self-center btn btn-danger delete-image-form">Delete</button>
            </div>
            {% endfor %}
        
            <input type="submit" name="submit" value="Submit" class="btn btn-primary" />
            <button id="add-image-form" class="btn btn-primary my-3">Add Another Image</button>
        </form>
    </div>
</div>

谢谢，戴安娜

JavaScript“未捕获的DOMException：无法在'节点'上执行'insertBefore'

0 个答案: