我試圖在正面和背面之間翻轉卡片，每個卡片上顯示不同的數據。然而，我的代碼現在并排顯示正面和背面，當我單擊卡片時，它會將其翻轉，但所有內容都顛倒了。所以我需要將卡片背面的數據移到卡片中，并在翻轉后顯示它。我的 HTML 只有卡片的容器。<h1>POKEDEX</h1><div id="poke_container" class="poke_container"></div>這是我的 JavaScript 函數，它從 API 獲取數據，以及卡片正面和背面的 InnerHTML。function createPokemonCard(pokemon) {    const pokemonEl = document.createElement('div');    const pokemonElBack = document.createElement('div');    pokemonEl.classList.add('pokemon');    const poke_types = pokemon.types.map(el => el.type.name);    const type = pokemon.types[0].type.name;    //const stats = pokemon.stats[0].stat.name;    const ability = pokemon.abilities[0].ability.name;    const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);    const card_color = colors[type];    pokemonEl.style.backgroundColor = card_color;    //Card Front data and HTML    const pokeInnerHTML = `    <div class="front">    <div class="img-container">    <img src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png" />    </div>    <div class ="info">      <span class="number">#${pokemon.id.toString().padStart(3, '0')}</span>      <a href="https://bulbapedia.bulbagarden.net/wiki/${name}_(Pok%C3%A9mon)" class="name"><h3>${name}</h3></a>      <small class="type"><span>${type.charAt(0).toUpperCase() + type.slice(1)}</span></small>    </div>    </div>    `;    pokemonEl.innerHTML = pokeInnerHTML;    poke_container.appendChild(pokemonEl);// Back of the card data  const pokeCardBack = `    <div class="flipped">      <div class="img-container">      <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png" />      </div>      <div class ="info">        <span class="number">#${pokemon.id.toString().padStart(3, '0')}</span>        <h3 class="name">${name}</h3>        <small class="type"><span>${ability}</span></small>      </div>    </div>    `;這是我的CSS。大多數只是針對卡片設計，但翻轉應該是針對卡片背面?，F在它只是翻轉卡片，但只顯示正面的鏡像版本，而不是背面的數據。