如何将文本和图像元素添加到div元素中？

Answer 1

由于您需要将图像添加到您在项目部分中添加的卡片，因此您可以在将卡片附加到 DOM 之前添加图像。这样您就可以从代码中删除一个额外的循环。

var projects = [
    {
    "title": "ToDo List App",
    "description": "This project is about a simple ToDo App.",
    "image": "https://images.pexels.com/photos/110473/pexels-photo-110473.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
},
{
    "title": "Calculator App",
    "description": "This project is about a Calculator App.",
    "image": "https://plus.unsplash.com/premium_photo-1661311947753-065ef4af9087?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1032&q=80"
},
{
    "title": "Weather App",
    "description": "This project is about a Weather App.",
    "image": "https://media.istockphoto.com/id/1176320050/photo/weather-forecast-on-a-digital-display-7-day-dashboard-3d-illustration.jpg?s=612x612&w=is&k=20&c=cP1wxucPWNcaXOe9BgceXNb9aKTv0uDX3AoW2aSvAvg="
},
{
    "title": "Timer App",
    "description": "This project is about a Timer App",
    "image": "https://media.istockphoto.com/id/533888785/photo/smartphone-stopwatch.jpg?s=612x612&w=is&k=20&c=UejoQeXXO4WV7xqSmXl4QaCQam509L7oxes7lpowJjg="
},
{
    "title": "Chat Application",
    "description": "This project is about a simple Chat Application.",
    "image": "https://plus.unsplash.com/premium_photo-1688822014591-30d7b089b43c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
}

]
  
  
function loadProjects() {
  // Write your code here
  for (var i=0; i<projects.length; i++){
    card = document.createElement('div')
    card.className = 'card'
    
    image = document.createElement('img')
    image.src = projects[i]["image"]
    card.appendChild(image);
    document.getElementById("projects").appendChild(card)
  }
}



loadProjects();

<div id="projects-section" class="section">
  <h2>My Projects</h2>
  <div id="projects"></div>
</div>