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

问题描述

<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: Failed to execute 'insertBefore' on 'Node': 要插入新节点的节点不是该节点的子节点. 在 HTMLFormElement 的 Function.showAlert (file:///C:/Users/awbak/Desktop/WEBSITES/My%20Car%20List/app.js:56:13)。(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

标签： javascriptjqueryhtmlarraysjquery-ui

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

问题描述

解决方案

推荐阅读