最近我决定尝试将小项目付诸实践，这些项目与课堂上完成的项目不同。
这个有一个简单的目标：
我有一个图像和它旁边的一个按钮。每次按下按钮时，它都应该在按钮本身之前创建一个与第一个具有相同类和内容的 img 标签。
// From HTML
const content = document.querySelector('#content');
const addBtn = document.querySelector('#btn-plus');
// Function
function addImagem(){
const img = document.createElement('img'); // create img
img.classList.add('imgQ'); // give this img a class ('imgQ')
img.innerHTML = '<img src="imgs/bigodes.jpg">'; // give this img a HTML content
content.insertBefore('img','addBtn'); // insert this img before add button inside div
}
//Event
addBtn.forEach((Btn)=> Btn.addEventListener('click',addImagem())
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gats</title>
<link rel="stylesheet" href="style/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="script/index.js"></script>
</head>
<body>
<header class="top">
<h1>Cats! Anyway</h1>
</header>
<nav class="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn-search" type="submit"><i class="fa-solid fa-search"></i></button>
</nav>
<main class="mid">
<div id="content">
<img class="imgQ" src="imgs/bigodes.jpg">
<button type="submit" id="btn-plus"><i class="fa-thin fa-plus"></i></button>
</div>
</main>
<footer class="bottom"></footer>
</body>
</html>
首先，我更改了 getElementById > querySelector，然后重写注释想法步骤的所有内容。由于它不起作用，我在这里阅读了几个问题并查看了 yt。还尝试删除 forEach，但是当我这样做时，第二个元素没有出现在里面。在这两种情况下，添加按钮都不起作用。
P粉6548949522024-01-11 15:03:16
我对你的 addImagem 函数做了一些更改： 使用“setAttribute”函数，这样它就不会在已经存在的 内创建一个新的 img 标签。
function addImagem(){
const img = document.createElement('img'); // create img
img.classList.add('imgQ'); // give this img a class ('imgQ')
img.setAttribute('src',"imgs/bigodes.jpg"); // give this img a HTML content
content.insertBefore(img,content.children[0]); // insert this img before add button inside div
}
“forEach”函数仅适用于数组。由于您只有一个按钮，您可以使用：
addBtn.addEventListener('click',addImagem)
或者您可以将 addBtn 的 querySelector 更改为 querySelectorAll。