如何修復 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