如何在动态注入的HTML中运行JavaScript条件语句

这个问题我之前也碰到过——在模板字面量里嵌套script标签处理条件逻辑根本行不通，咱们换个更直接的思路来实现你的需求：

方法1：直接在模板字面量中使用三元表达式 #

模板字面量（` `包裹的字符串）本身支持通过${}插入JavaScript表达式，包括条件判断的三元运算符，这样就能直接根据media_type生成对应的HTML元素：

const createNasaCard = (nasaItem) => {
  document.querySelector("#nasaInfo1").insertAdjacentHTML(
    "beforeend",
    `
    <section class="container my-5">
      <div class="row g-3">
        <div class="col-lg-6">
          ${nasaItem.media_type === "image" 
            ? `<img src="${nasaItem.url}" alt="Nasa Image of the Day" class="w-100 h-60 shadow" >` 
            : nasaItem.media_type === "video" 
              ? `<iframe src="${nasaItem.url}" frameborder="0"></iframe>` 
              : ''}
        </div>
      </div>
    </section>
    `
  );
}

方法2：提前生成媒体元素字符串（可读性更好） #

如果后续条件逻辑变得复杂，提前把要渲染的HTML字符串单独生成，再插入到模板里会更清晰：

const createNasaCard = (nasaItem) => {
  // 先根据类型生成对应的HTML字符串
  let mediaElement = '';
  if (nasaItem.media_type === "image") {
    mediaElement = `<img src="${nasaItem.url}" alt="Nasa Image of the Day" class="w-100 h-60 shadow" >`;
  } else if (nasaItem.media_type === "video") {
    mediaElement = `<iframe src="${nasaItem.url}" frameborder="0"></iframe>`;
  }

  // 再插入到页面中
  document.querySelector("#nasaInfo1").insertAdjacentHTML(
    "beforeend",
    `
    <section class="container my-5">
      <div class="row g-3">
        <div class="col-lg-6">
          ${mediaElement}
        </div>
      </div>
    </section>
    `
  );
}

为什么你原来的方法不行？ #

1. script标签不会执行：用insertAdjacentHTML插入的script标签，浏览器默认不会执行其中的代码（除非做特殊配置，但这里完全没必要）；
2. HTML代码无法解析：script标签内部的HTML代码不会被当作页面内容渲染，只会被当成脚本文本，所以要么看不到图片，要么会直接显示if/else的字样。

模板字面量的核心优势就是支持直接嵌入表达式，所以完全不需要借助script标签来处理条件渲染~

内容的提问来源于stack exchange，提问作者Clyde