如何在将 DOM 元素添加到 HTML 之前对其进行操作？

Question

代码： https://codepen.io/furkancodes-the-typescripter/pen/QWdYgzp?editors=1010

前言：我一直在尝试编写这个图书馆应用程序，当书籍添加到图书馆时，我正在使用 innerHTML 编写所有 css。 它可以工作，但是当我实现“删除”时，它会在单击删除图标时删除该行，但是，由于我将删除设置为“显示”，即屏幕的一半，无论您单击何处，“书已删除”出现错误，我知道原因，这是因为我将其设置为“显示”（这是库的内容！）

对我来说有问题和令人困惑的部分；

row.innerHTML 创建一个名为“book”的 div class ，它包含所有书籍信息并将其显示在“显示器”上，但是，我只对 select “book” ZA2F2ED4F8EBC2CBB4C21A29DC40AB61 和 write;

const book = document.querySelector('.book');

book.addEventListener
// and here I add the codes to delete that book row

但是 book.AddEvent 总是返回“null”，这是有道理的，因为它一开始就不存在......

我的问题的主要问题和解决方案也是：这就是为什么我试图了解如何在 class 启动之前触摸它。 因为我想 select 那个“书” class 包含所有信息，但我不能。

如果一切都失败了，我会尝试的其他一些事情：我想但没有做的最后一件事是放弃所有 row.innerHTML 元素，并在我的图书库中编写和附加每个元素，例如作者、标题等并附加它们逐个。 但这需要一段时间。

很抱歉这篇长文，我希望我能说清楚，如果我在思考过程中需要解决一些问题，我将不胜感激。

Answer 1

您的代码中有两个问题：

1. 您正在尝试在将.book元素添加到新row之前获取它
2. 您正在使用document.querySelector() ，它将搜索整个文档并返回第一个找到的查询实例。 而是使用row.querySelector() ，它只会搜索当前书籍（显然在 1. 之后是固定的）

所以你的addBookToLibrary()应该是这样的：

  addBookToLibrary(book) {
    const list = document.querySelector('.display-lib');
    const row = document.createElement('th');

 
    row.innerHTML = `
  <div class="book"> 
   <div class="title">Title: ${book.title}</div>
   <p class="author">Author: ${book.author}</p>
  <p class="pages">Pages: ${book.pages}</p>
  <p class="pages">Notes: ${book.notes}</p>
  <span class="read_toggle_label">Mark as read:</span>
    
         <label class="switch">
        <input type="checkbox">
        <span class="slider round"></span>
      </label>
     
  <a href="#" class="delete"></a>
  </div>
  `;
   const bookTh = row.querySelector('.book');



    list.appendChild(row);
  }

Answer 2

 addBookToLibrary(book) { const shelf = document.querySelector('#book-list'); const row = document.createElement('th'); row.innerHTML = ` <div class="book"> <div class="title">Title: ${book.title}</div> <p class="author">Author: ${book.author}</p> <p class="pages">Pages: ${book.pages}</p> <p class="pages">Notes: ${book.notes}</p> <span class="read_toggle_label">Mark as read:</span> <label class="switch"> <input type="checkbox"> <span class="slider round"></span> </label> <a href="#" class="delete"></a> </div> `; const dlt = row.querySelector('.delete'); dlt.addEventListener('click', function (e) { //first get the UI const ui = new UI(); ui.deleteBook(e.target); ui.showAlertDelete('book removed', 'success'); }) shelf.appendChild(row); }