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未捕获的DOMException：无法在“节点”上执行“ insertBefore”：要在其之前插入新节点的节点不是该节点的子节点。在Function.showAlert（file：/// C：/Users/awbak/Desktop/WEBSITES/My%20Car%20List/app.js：56：13）在HTMLFormElement。（文件：/// 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内，

insertBefore reference

如何修复JS中的insertBefore（）错误

1 个答案: