添加带有类名的innerHTML块

Question

我正试图用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吗??我需要在section部分结束前添加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>`;

显示错误

Answer 1

我没有完全理解你的问题，但是你应该尝试在JavaScript中使用循环来做到这一点。

为了获得更好的质量答案，您应该将您的html和javascript代码分开，并至少给我们您收到的错误和预期的结果!

以执行以下任务的代码为例:generateTiles函数的参数为生成的贴图数量，最后分配的贴图数量，以及添加贴图的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>

Answer 2

由于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参数可以接受一些值，你可以在这里找到更多