如何修复 JS 中的 insertBefore() 错误

Question

 <body> <div class="container mt-4"> <h1 class="display-4 text-center"> <i class="fas fa-car text-success"></i> My<span class="text-success ">Car</span>List</h1> <form id="car-form"> <div class="form-group"> <label for="worker">Empoloyee ID</label> <input type="text" id="worker" class="form-control"> </div> <div class="form-group"> <label for="carVin">Car Vin</label> <input type="text" id="carVin" class="form-control"> </div> <div class="form-group"> <label for="strTime">Start time</label> <input type="text" id="strTime" class="form-control"> </div> <div class="form-group"> <label for="endTime">End time</label> <input type="text" id="endTime" class="form-control"> </div> <input type="submit" value="Add Car" class="btn btn-primary btn-block"> </form> </body>

 <div class="container mt-4"> <h1 class="display-4 text-center"> <i class="fas fa-car text-success"></i> My<span class="text-success ">Car</span>List</h1> <form id="car-form"> <div class="form-group"> <label for="worker">Empoloyee ID</label> <input type="text" id="worker" class="form-control"> </div> <div class="form-group"> <label for="carVin">Car Vin</label> <input type="text" id="carVin" class="form-control"> </div> <div class="form-group"> <label for="strTime">Start time</label> <input type="text" id="strTime" class="form-control"> </div> <div class="form-group"> <label for="endTime">End time</label> <input type="text" id="endTime" class="form-control"> </div> <input type="submit" value="Add Car" class="btn btn-primary btn-block"> </form> <table class="table table-striped table-hover table-dark mt-3"> <thead> <tr> <th>Employee ID</th> <th>Car Vin</th> <th>Start time</th> <th>End time</th> <th></th> </tr> </thead> <tbody id="car-list"></tbody> </table> <!div id="my-filter" class="msg" > <!input type="submit" value="Filter Car" class="btn btn-primary btn-block"> </div>

我正在设置一个新的 div，用于使用 insertBefore() 方法为我的程序显示错误消息，但它似乎不起作用。 我将如何解决这个问题？ 我需要改变什么？

class UI {
  static displayCars(){}

  static addCarToList(car){
    const list = document.querySelector('#car-list');
    const row = document.createElement('tr');
    row.innerHTML = `
    <td>${car.worker}</td>
    <td>${car.carVin}</td>
    <td>${car.strTime}</td>
    <td>${car.endTime}</td>
    <td><a href="#" class="btn btn-danger btn-sm 
    delete">Clear</a></td>`;
    list.appendChild(row);
  }

  static showAlert(message, className){
    const div =document.createElement('div');
    div.className = `alert alert-${className}`;
    div.appendChild(document.createTextNode(message));
    const container = document.querySelector('.container');
    const form = document.querySelector('#car-form');
    // before(newnode, existingnode)
    // IM HAVING THE ERROR LINE 49
    container.insertBefore(div, form);

    // Vanish in 3 secs
    setTimeout(() => document.querySelector('.alert').remove(),3000);
  }
}

该程序将显示汽车阵列，但不会在第 111 行显示警报消息

if(worker === ''|| carVin === ''|| strTime === '' || endTime === ''){
  UI.showAlert('Please fill all fields', 'danger');  //LINE 111 
} else {

  // Instatiate car
  const car = new Car(worker, carVin, strTime, endTime);

  // Add car to list 
  // UI.addCarToList(car); ///

  // Add car to local storage
  Store.addCar(car);
  UI.displayCars(); ///

  // Show Success msg
  UI.showAlert('Car Added', 'success');

  //Clear fields
  UI.clearFields();
}

[.[错误描述][2]][2] app:js:56 Uncaught DOMException: 无法在“节点”上执行“insertBefore”。 要插入新节点的节点不是该节点的子节点。 在 Function:showAlert (file:///C./Users/awbak/Desktop/WEBSITES/My%20Car%20List/app:js:56.13) 在 HTMLFormElement: (file:///C./Users/awbak/Desktop /WEBSITES/My%20Car%20List/app:js:120:6)

   [1]: https://i.stack.imgur.com/G1yIM.png
   [2]: https://i.stack.imgur.com/koiYh.png

Answer 1

正如您的错误所述，您的form不在container内。 referenceNode ，所以form ，需要在container内，

在参考之前插入

如何修复 JS 中的 insertBefore() 错误

问题描述

1 个解决方案

解决方案1
0 2019-10-23 00:52:24

如何修复 JS 中的 insertBefore() 错误

问题描述

1 个解决方案

解决方案1 0 2019-10-23 00:52:24

解决方案1
0 2019-10-23 00:52:24