为何JavaScript创建的电影标题/年份未应用CSS样式？如何修复？

我希望Movie Title和Movie Year能够应用CSS中设置的大字号白色文本+Google字体样式，但目前通过JavaScript创建的这些元素仅显示纯黑色文本，请问遗漏了什么？

代码片段 #

HTML #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
      integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLdPG8FJ0V7irTLQ8Uo0qcPxh4Plq7G5tGm0rU+1SPhVotteLpBERwTkw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Lato&display=swap"
      rel="stylesheet"
    />
    <link href="https://fonts.cdnfonts.com/css/fxno-w" rel="stylesheet" />

    <link rel="stylesheet" href="style.css" />
    <title>Movie App</title>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>FIND YOUR <span class="gradient-text">FAVORITE</span> MOVIE.</h1>
      </header>

      <input type="text" id="movie-search-box" onkeyup="findMovies()" />

      <i class="fa-solid fa-magnifying-glass fa-lg" aria-hidden="true"></i>

      <div class="result-grid" id="result-grid">
        <!-- <div class="movie-card" id="movie-card">
          <img class="movie-cover" />
          <h3 class="movie-title">Aquaman</h3>
          <h4 class="movie-year">(1994)</h4>
        </div> -->
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS #

body {
   background: #333333; 
   font-family: 'Lato', sans-serif;                                
}

.container {
    width: 90%;
    max-width: 1200px;
    text-align: center;
    margin: auto;
    margin-top: 50px;
}

/* Main header section */

h1 {
    color: white;
    font-size: 2.8rem;
    font-family: 'fx logo'
}

.movie-title {
    color: white;
    font-size: 1.4rem;
    margin: 10px 0 0 0;
    text-transform: uppercase
}

.movie-year {
    color: white;
    font-size: 1 rem;
    margin: 10px 0 0 0;
    text-transform: uppercase
}

/* Changes "Favorite" text to a gradient */

.gradient-text {
    background-image: linear-gradient(45deg, #d41044, #f89f03);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}

/* Input box section */

input {
    width: 50%;
    height: 30px;
    background-color: #222222;
    border: 1px solid rgba(255, 255, 255, 0.562);
    border-radius: 5px;
    padding-left: 15px;
}

input:focus {
    outline: none;
}

input[type=text]{
    color: rgba(255, 255, 255, 0.616);
}

.fa-magnifying-glass {
    color: white;
    margin-left: 10px;
}

.searchBtn {
    width: 35px;
    height: 35px;
    background: #333333;
    border: none;
    border-radius: 5px;
}

.searchBtn:hover {
    background: rgba(0, 0, 0, 0.116);
    cursor: pointer; 
}

/* Movie Results Grid Section */

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

}

.movie-card {
    margin-top: 60px;
}

.movie-cover {
    width: 200px;
}


/* js related classes */
/* .hide-result-grid {
    display: none;
} */

JavaScript #

const movieSearchBox = document.getElementById("movie-search-box");

function findMovies() {
  const searchTerm = movieSearchBox.value;
  const resultsGrid = document.getElementById("result-grid");

  if (searchTerm.length > 2) {
    fetch(`http://www.omdbapi.com/?s=${searchTerm}*&apikey=dd3f37db`)
      .then((response) => response.json())
      .then((movieResults) => {
        movieResults.Search.forEach((movie) => {
          const movieCard = document.createElement("div");
          movieCard.classList.add("movie-card");
          resultsGrid.append(movieCard);

          const movieTitle = document.createElement("h3");
          movieTitle.classList.add("movie-title");
          movieCard.append(movie.Title);

          const movieYear = document.createElement("h4");
          movieYear.classList.add("movie-year");
          movieCard.append(` (${movie.Year})`);

          console.log(movie.Title);
        });
      })
      .catch((error) => console.log(error));
  }
}

问题原因 #

你创建了带样式类的movieTitle和movieYear元素，但没有把文本内容放入这些元素中，反而直接把字符串movie.Title和(movie.Year)追加到了movieCard里。这些裸文本不会应用你定义的.movie-title和.movie-year样式，只会继承浏览器默认的黑色文本样式。

另外还有两个小问题：

1. CSS里.movie-year的font-size写成了1 rem（多了空格），应该是1rem
2. 每次搜索时没有清空之前的结果，会导致新结果不断累加

修复后的JavaScript代码 #

const movieSearchBox = document.getElementById("movie-search-box");

function findMovies() {
  const searchTerm = movieSearchBox.value;
  const resultsGrid = document.getElementById("result-grid");

  // 清空之前的搜索结果
  resultsGrid.innerHTML = "";

  if (searchTerm.length > 2) {
    fetch(`http://www.omdbapi.com/?s=${searchTerm}*&apikey=dd3f37db`)
      .then((response) => response.json())
      .then((movieResults) => {
        movieResults.Search.forEach((movie) => {
          const movieCard = document.createElement("div");
          movieCard.classList.add("movie-card");
          resultsGrid.append(movieCard);

          // 创建标题元素并设置内容
          const movieTitle = document.createElement("h3");
          movieTitle.classList.add("movie-title");
          movieTitle.textContent = movie.Title; // 将文本放入元素
          movieCard.append(movieTitle); // 追加元素到卡片

          // 创建年份元素并设置内容
          const movieYear = document.createElement("h4");
          movieYear.classList.add("movie-year");
          movieYear.textContent = `(${movie.Year})`; // 将文本放入元素
          movieCard.append(movieYear); // 追加元素到卡片
        });
      })
      .catch((error) => console.log(error));
  }
}

额外修复（CSS） #

修正.movie-year的字体大小：

.movie-year {
    color: white;
    font-size: 1rem; /* 去掉空格 */
    margin: 10px 0 0 0;
    text-transform: uppercase
}

这样修改后，生成的标题和年份就会正确应用你设置的白色大字体样式了。

内容的提问来源于stack exchange，提问作者lgrizo