如何在动态注入的 HTML 中运行有条件的 javaScript

Question

我正在使用 API 并从 JS 文件中动态注入 HTML。在 HTML（写在 JS 文件中）中，我需要运行条件，但条件仅在注入 HTML 的模板文字之外时才有效。我想也许我需要一个脚本标签，但是当我使用一个时，代码不会运行并且图像不会被渲染。如果我删除脚本标签，则呈现“if”/“else”字样，呈现图像但条件实际上并未运行。下面我包含了我尝试注入的代码片段。如何让条件运行？

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

Image from dev tools

Answer 1

考虑（更重要的是，在调试中观察）这会产生什么：

if(${nasaItem.media_type} === "image")

如果您希望nasaItem.media_type 的值永远是字符串"image"，那么您所拥有的是：

if(image === "image")

除非您有一个名为image 的变量，否则这将产生错误。如果您希望该值是一个字符串，请将其用引号括起来：

if("${nasaItem.media_type}" === "image")

编辑：一旦纠正，第二个问题就是这没有意义：

if("image" === "image"){
  <img src="some_url_value" alt="Nasa Image of the Day" class="w-100 h-60 shadow" >
}

您不能直接在 JavaScript 代码中编写 HTML 并期望该代码知道如何处理它。您想将该 HTML 代码放在 DOM 的哪个位置？例如，您已经通过此操作将 HTML 添加到 DOM：

document.querySelector("#nasaInfo1").insertAdjacentHTML("beforeend", "SOME HTML CODE");

这会插入与匹配的 #nasaInfo1 元素相关的 HTML。这就是您将 HTML 从 JavaScript 添加到 DOM 的方式。因此，在您要添加的新 JavaScript 代码中……这就是您将 HTML 添加到 DOM 的方式。

除非...您的实际意思是现在调用该JavaScript逻辑作为构建模板字面量的一部分。 （这可能是您想要的，因为将 JavaScript 动态添加到页面非常奇怪，并且很可能会出现错误。）在这种情况下，逻辑需要在代码中，而不是模板的一部分文字字符串。像这样的：

`<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>`

因此，在较大模板文字的整体${} 中，本质上存在一个内联条件（链接一些三元条件运算符）来产生一个值。该值有条件地是其他几个模板文字之一，具体取决于 nasaItem.media_type 的值。

整个模板文字应该解析为：

<section class="container my-5">
  <div class="row g-3">
    <div class="col-lg-6">
      <img src="SOME_URL_VALUE" alt="Nasa Image of the Day" class="w-100 h-60 shadow">
    </div>
  </div>
</section>

您可以按照自己喜欢的方式嵌套逻辑。但是逻辑需要是执行代码的一部分，而不是字符串的一部分。如果它是字符串的一部分，那么它将像字符串的其余部分一样添加到页面中。

如果具有添加更多模板文字的内联条件的大型模板文字变得笨拙，您始终可以将其拆分为多个操作。例如：

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

我个人更喜欢前者。但是有多种方法可以组织代码，包括将小部分重构为自己恰当命名的函数，以使代码更具可读性。

无论你怎么看，你所做的只是构建一个字符串。不要试图在该字符串中放入更多代码并期望它执行，从而使其过于复杂。只需根据需要将字符串拼凑起来即可。