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

Question

The code: https://codepen.io/furkancodes-the-typescripter/pen/QWdYgzp?editors=1010

Preface: I have been trying to code this Library app, I am using innerHTML to write all the css when the book is added to the library. It works, but when I implemented the "delete", it deletes the row when clicked on the delete icon, however, since I set the delete to "display" which is half of the screen, wherever you click, the "book deleted" error comes up and I know the reason why, it is because I set it to "display"(which is the contents of the library!)

There comes is problematic and confusing part for me;

row.innerHTML creates a div class called "book" and it contains the all of the book information and displays it on the "display" however, I only to select "book" class and I write;

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

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

but book.AddEvent always return "null" and it makes sense because it is not there in the first place...

The main question and solution to my problem too: That is why I Am trying to learn about how do I touch a class before even it is initiliazed. Because I want to select that "book" class which holds all the information, but I just can't.

Some other thing I Will try if all else fails: Last thing I thought but did not do was ditching all of the row.innerHTML element, and writing and appending each of the elements in my book library such as AUthor, title etc and appending them one by one. But this will take a while.

Sorry for the long post, I hope I made myself clear and I would appreciate if I gotta fix something in my thought-process.

Answer 1

There are two issues in your code:

1. you are trying get .book element before it's added into new row
2. you are using document.querySelector() , which will search entire document and return first found instance of the query. Instead use row.querySelector() , which will only search current book (obviously after 1. is fixed)

So your addBookToLibrary() should look something like this:

  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); }