JS选择插入后的元素

Question

我有从API获取一些数据的功能，然后插入一些动态内容，包括img元素与lazyLoad类，我如何在内容插入后选择此图像?

API.js

const spoonacular = async () => {
const response = await fetch(
"https://api.spoonacular.com/recipes/complexSearch?apiKey=c0c692d2b8be4e92a29883049789419b&includeNutrition=true.",
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
);
const data = await response.json();
data.results.forEach((e) => {
const html = `
<div class="dish" id="a${e.id}">
<a href="recipe/${e.id}"><img src=${e.image} alt="" class="dishImg lazyLoad" /></a>
<h2 class="dishTitle">
${e.title}
</h2>
</div>
`;
dishes.insertAdjacentHTML("afterbegin", html);
});
};

我尝试使用onload:

lazyLoading.js

window.onload = function () {
const images = document.querySelectorAll(".lazyLoad");
console.log(images); // returns empty ```NodeList```
};

，但它不工作，如何选择它后，它被插入?提前感谢

Answer 1

如果您使用document.createElement而不是HTML字符串，您可以在将它们插入DOM之前直接访问每个元素。

data.results.forEach(e => {
const div = document.createElement('div');
div.className = 'dish'; div.id = 'a' + e.id;
const a = document.createElement('a');
a.href = 'recipe/' + e.id;
const img = document.createElement('img');
img.src = e.image;
img.className = 'dishImg lazyLoad';
// do something else with img here
a.append(img);
const h2 = document.createElement('h2');
h2.className = 'dishTitle';
h2.textContent = e.title;
div.append(a, h2);
dishes.prepend(div);
});

您还可以考虑使用<template>来存储这些重复的元素片段。例如:

<template id="dishTemplate">
<div class="dish">
<a><img alt="" class="dishImg lazyLoad" /></a>
<h2 class="dishTitle"></h2>
</div>
</template>

data.results.forEach(e => {
const content = document.getElementById('dishTemplate').content.cloneNode(true);
content.firstElementChild.id = 'a' + e.id;
content.querySelector('a').href = 'recipe/' + e.id;
const img = content.querySelector('img');
img.src = e.image;
// do something else with img here
Object.assign(content.querySelector('h2'), {className: 'dishTitle', textContent: e.title});
dishes.prepend(content);
});