添加带有类名的innerHTML块

5jvtdoz2 于 2023-04-10 发布在其他

关注(0)|答案(2)|浏览(154)

我正在尝试使用JS，HTML和CSS编写记忆瓷砖游戏。我正在添加难度级别容易（44瓷砖），中（66瓷砖）和硬（88瓷砖）。当我选择66时，我需要通过DOM将代码块添加到HTML文件中。

<div class="tiles" data-name="8">
  <img class="original" src="images/front-image.png" />
  <img class="shuffled" src="images/logo_8.jpg" />
</div>

我需要这样做了很多次，因为容易的水平，我需要16个瓷砖总数，为中等水平32瓷砖和硬水平64瓷砖。谁能帮我添加内部的HTML为这个？？我需要添加innerHTML部分结束前。

<section class="game-tiles">
  <div class="tiles" data-name="1">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_1.png" />
  </div>
  <div class="tiles" data-name="1">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_1.png" />
  </div>
  <div class="tiles" data-name="2">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_2.png" />
  </div>
  <div class="tiles" data-name="2">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_2.png" />
  </div>
  <div class="tiles" data-name="3">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_3.png" />
  </div>
  <div class="tiles" data-name="3">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_3.png" />
  </div>
  <div class="tiles" data-name="4">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_4.jpg" />
  </div>
  <div class="tiles" data-name="4">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_4.jpg" />
  </div>
  <div class="tiles" data-name="5">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_5.png" />
  </div>
  <div class="tiles" data-name="5">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_5.png" />
  </div>
  <div class="tiles" data-name="6">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_6.jpg" />
  </div>
  <div class="tiles" data-name="6">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_6.jpg" />
  </div>
  <div class="tiles" data-name="7">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_7.png" />
  </div>
  <div class="tiles" data-name="7">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_7.png" />
  </div>
  <div class="tiles" data-name="8">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_8.jpg" />
  </div>
  <div class="tiles" data-name="8">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_8.jpg" />
  </div>
</section>

以及JavaScript：

const gameTiles = document.querySelector(".game-tiles");
gameTiles.insertAdjacentElement = `
  <div class="tiles" data-name="1">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_1.png" />
  </div>`;

它给了我错误

Html

来源：https://stackoverflow.com/questions/75922451/add-block-of-innerhtml-with-class-names

2条答案

按热度按时间

f8rj6qna1#

我没有完全理解你的问题，但你应该尝试使用JavaScript中的循环来做到这一点。
为了得到更好的答案，你应该把你的html和javascript代码分开，至少给予我们你收到的错误和预期的结果！
例如，下面的代码执行以下任务：generateTiles函数的参数包括要生成的tile的数量、最后分配的tile的数量以及要添加tile的HTML DOM元素。

function generateTiles(element, tilesCount, lastTile = 0) {
  for (let i = 0; i < tilesCount; i++) { // You run the number of tiles to add the following code
    const tileNumber = lastTile + i + 1; // You define the actual tile number to get the good Image

    const div = document.createElement('div'); // You create a div element
    div.classList.add("tiles"); // Add the 'tiles' class to it
    div.setAttribute("data-name", tileNumber); // Set the 'data-name' attribute to the number of this tile

    div.innerHTML = `
       <img class="original" src="images/front-image.png" />
       <img class="shuffled" src="images/logo_${tileNumber}.png" />`; // You append the two images you want to it

    element.append(div); // Then, you append your div to your 'tiles-container' element, so this div will be at the end of the 'tiles-container' div.
  }
}

const tilesContainer = document.querySelector(".game-tiles");

function generateTiles(element, tilesCount, lastTile = 0) {
    for (let i = 0; i < tilesCount; i++) {
      const tileNumber = lastTile + i + 1;
      
      const div = document.createElement('div');
      div.classList.add("tiles");
      div.setAttribute("data-name", tileNumber);
      
      div.innerHTML = `
   <img class="original" src="images/front-image.png" />
   <img class="shuffled" src="images/logo_${tileNumber}.png" />`;

      element.append(div);
    }
}

// generate 6 tiles:
generateTiles(tilesContainer, 6);

<section class="game-tiles">
</section>

赞(0）回复(0）举报 2023-04-10

yhuiod9q2#

由于insertAdjacentElement是一个方法，因此您应该尝试以下语法

const gameTiles = document.querySelector(".game-tiles");
gameTiles.insertAdjacentElement(position, `
  <div class="tiles" data-name="1">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_1.png" />
  </div>`);

position参数可以接受一些值，您可以find more here

赞(0）回复(0）举报 2023-04-10

我来回答

添加带有类名的innerHTML块

2条答案

相关问题

热门标签

最新问答