未捕获的类型错误：无法读取未定义的属性（读取“childNode”）

Question

您好，我正在尝试为我的表单集遵循以下教程，但我发现部分问题：

container.insertBefore (newForm, addButton)

出现的错误如下：

calculos.js: 195 Uncaught TypeError: Cannot read properties of undefined (reading 'childNode')

我已经尝试了所有方法但找不到 childNode

JS

let parteForm = document.querySelectorAll(".part-form")
let container = document.querySelector("#part-form-container")
let addButton = document.querySelector("#add-form")
let totalForms = document.querySelector("#id_form-TOTAL_FORMS")
let formNum = parteForm.length-1 // Get the number of the last form on the page with zero-based indexing


addButton.addEventListener('click', addForm)

function addForm(){
    //e.preventDefault()
    let newForm = parteForm[0].cloneNode(true)
    let formRegex = RegExp(`form-(\\d){1}-`,'g')
    formNum++
    newForm.innerHTML = newForm.innerHTML.replace(formRegex, `form-${formNum}-`)

    container.insertBefore(newForm, addButton)

    //parentnode.insertbefore(newnode,elnodoantesdelcualseinsertanewnode)
    //#part-form-container.insertbefore(div.part-form,)

    totalForms.setAttribute('value', `${formNum+1}`)
}

HTML

<form method="POST" id="part-form-container">
{% csrf_token %}

<div class="row">
<div class="col-12">
   <div class="card">
        <div class="card-body">
            <div class="row mb-3">
                   <div class="col-md-12">
                    <div class="mb-3">
                       <label for="verticalnav-email-input">Summary</label>                                                               
                     {{presupuestosparteform.resumen}}

                   </div>
                 </div>
               </div>


<h4 class="card-title">Parts list</h4>
<p class="card-title-desc">Add the parts that you need to include.</p>

<input type="button" class="btn btn-block btn-default btn-success mb-4" id="add-form" onclick="addForm()" value="+ Add part" />
<div class="table-responsive">
<table class="table table-bordered table-nowrap align-middle" id="childTable1">
                                                                                
<tbody>
{{ formset.management_form }}
{% for form in formset %}
<div class="part-form">
        <tr>
           <td>
                                                                                        
                   {{form.codigo}}

                    </td>
                     <td>
                                                                                        
                   {{form.descripcion}}

                  </td>

                 </tr>
               </div>
             {% endfor %}

           </tbody>
       </table>
</form>

Answer 1

也许我不明白你的代码，但对我来说似乎缺少一些关闭的“div”标签。我的建议是重组你的代码并清理它。

现在关注这个错误

(https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore):

Node接口的insertBefore()方法在之前插入一个节点 引用节点作为指定父节点的子节点。

您只需要确保 cointer 包含您之前要插入的元素，所以我认为只需关闭打开的 div 标签即可解决。 我还注意到没有Id="id_form-TOTAL_FORMS" 的元素，所以setAttribute 不起作用。

let parteForm = document.querySelectorAll(".part-form")
let container = document.querySelector("#part-form-container")
let addButton = document.querySelector("#add-form")
let totalForms = document.querySelector("#id_form-TOTAL_FORMS")
let formNum = parteForm.length-1 // Get the number of the last form on the page with zero-based indexing


addButton.addEventListener('click', addForm)

function addForm(){
    //e.preventDefault()
    let newForm = parteForm[0].cloneNode(true)
    let formRegex = RegExp(`form-(\\d){1}-`,'g')
    formNum++
    newForm.innerHTML = newForm.innerHTML.replace(formRegex, `form-${formNum}-`)

    container.insertBefore(newForm, addButton)

    //parentnode.insertbefore(newnode,elnodoantesdelcualseinsertanewnode)
    //#part-form-container.insertbefore(div.part-form,)
}

<form method="POST" id="part-form-container">



                <label for="verticalnav-email-input">Summary</label>


          <h4 class="card-title">Parts list</h4>
          <p class="card-title-desc">Add the parts that you need to include.</p>

          <input type="button" class="btn btn-block btn-default btn-success mb-4" id="add-form" onclick="addForm()" value="+ Add part" />
          
<tbody>
  <div class="part-form">
          <tr>
             <td>Data-1</td>
             <td>Data-2</td>
          </tr>
  </div>
</tbody>
</table>
</form>