替换 javascript 中的元素而不是硬编码的 html

Question

我想知道为什么当我尝试使用模板文字替换 javascript 中的 HTML 元素时，它只是不在浏览器中呈现任何内容，但是当我保留 HTML 代码块时，它只是在我使用 = 符号和使用append += 它呈现在 HTML 块下，所以我想删除 html 并想让我的代码动态生成并删除硬编码的 html，而且我想知道为什么会这样？ 我的意思是我有硬编码的 HTML 块，其中包含图像、文本和列表，所以我想从 HTML 中删除它并使用 dom 和对象在 javascript 中替换它，但问题是当我试图这样做时只有一个小的空在我的窗口中呈现框但是当我保留 HTML 代码时它会改变它但是很好但是当我删除它时空框只显示并且内容消失

const projects = [
  {
    name: 'Tonic',
    list: ['Canopy', 'Back End Dev', '2015'],
    description:
      'A daily selection of privately personalized reads; no accounts or sign-ups required.',
    image1: 'img2/Snapshoot Portfolio.png',
    technologies: ['HTML', 'CSS', 'JavaScriptfdssdfsdfsdfdsfdsf'],
    liveLink: 'https://example.com/live',
    sourceLink: 'https://example.com/source',
  },
  {
    name: 'Multi-Post Stories',
    image1: 'img2/Snapshoot Portfolio4.png',
  },
];

const existingCard = document.querySelector('.cards1');

for (const project of projects) {
  existingCard.innerHTML = `
    <img class="card-img" src="${project.image1}" alt="portfolio img">
    <div class="align-text">
      <h2 class="h2-size">${project.name}</h2>
      <ul class="first-list">
        <li class="list1">${project.list[0]}</li>
        <li class="list2">${project.list[1]}</li>
        <li class="list2">${project.list[2]}</li>
      </ul>
      <p class="work-p">${project.description}</p>
      <ul class="blue-list">
        <li>${project.technologies[0]}</li>
        <li>${project.technologies[1]}</li>
        <li>${project.technologies[2]}</li>
      </ul>
      <button class="work-btn btn">see project</button>
    </div>
  `;
}

那是 HTML 代码我的 HTML 中有 4 张卡片

<div class="cards1">
  <img class="card-img" src="img2/Snapshoot Portfolio.png" alt="portfolio img">
  <div class="align-text">
    <h2 class="h2-size">Tonic</h2>
    <ul class="first-list">
      <li class="list1">CANOPY</li>
      <li class="list2">Back End Dev</li>
      <li class="list2">2015</li>
    </ul>
    <P class="work-p">A daily selection of privately reads; no accounts or sign-ups required.</P>
    <ul class="blue-list">
      <li>HTML</li>
      <li>Css</li>
      <li>javascript</li>
    </ul>
    <button id="work-btn1" class="work-btn  
                                        btn">seeproject</button>
  </div>
</div>