addEventListener 添加到附加元素

Question

我想将 div 插入到我的 DOM 中，在这个 div 中我有一个按钮。所以我想为这个附加按钮创建 eventListener，但我不知道怎么做？我试过了，但现在工作了...

    const newMovie = document.createElement("div");
    newMovie.innerHTML = `
    <div class="movie">
          <img src=${movie.image}/>
          <div>
            <h3>${movie.name}</h3>
            <span>Rating : ${movie.rating} / ${movie.date}</span>
            <button id="deleteBtn">Delete</button>
          </div>
    </div>
    `;
    allMovies.append(newMovie);
    const deleteBtn = document.querySelector('#deleteBtn');
    deleteBtn.addEventListener("click", () => {
      const exsistMovie = newMovie.remove();
      movies.splice(exsistMovie, 1);
      updateMovies();
    });

但如果我将 deleteBtn 更改为 newMovie 它会起作用，但我不想通过单击电影来删除，只需在单击此按钮时删除..

我想插入元素到这个div

<div class="movies"></div>

以及我所有的 html 代码

    <div class="header">
      <h1 class="logo">My Project</h1>
      <h5>Add Movie</h5>
    </div>
    <div class="formm">
      <div class="form">
        <div class="err">
          <h1>Error</h1>
          <p>You Entered Wrong Value..</p>
        </div>
        <h2>Add Your Movie</h2>
        <input type="text" placeholder="Name Of Movie" id="movie" />
        <input type="text" placeholder="image URL" id="image" />
        <input type="number" placeholder="Rating" id="rating" />
        <div class="btns">
          <button id="submit">Submit</button>
          <button id="cancel">Cancel</button>
        </div>
      </div>
    </div>
    <div class="movies"> </div>

Answer 1

我猜 allMovies 是 div 和 class“电影”。所以试试 allMovies.appendChild(newMovie);

Answer 2

你是如何在 javascript 中定义 allMovies 的？什么是 allMovies？ appendChild() 是将子项添加到 html 元素的正确方法。如果要使用append()，则需要使用jquery.

addEventListener 添加到附加元素

addEventListener to appended element

javascript

addeventlistener