使用从 API 生成的链接创建一个 img答案

【问题标题】：Create an img with a link thats generated from an API使用从 API 生成的链接创建一个 img
【发布时间】：2022-08-02 03:19:16
【问题描述】：

fetch(\"/api/jobs/\", options)
   .then((response) => response.json())
   .then((response) => {
     console.log(response);
     for (let i = 0; i < response.length; i++) {
       var jobTitle = document.createElement(\"h2\");
       var jobDescription = document.createElement(\"a\");

尝试为她创建图像并使用从 job_url 生成的链接来制作一个 img，点击该链接会指向该链接

        var jobImage = document.createElement(\"img\");
        jobImage.setAttribute(
          \"src\",
          \"https://play-lh.googleusercontent.com/kMofEFLjobZy_bCuaiDogzBcUT-dz3BBbOrIEjJ-hqOabjK8ieuevGe6wlTD15QzOqw\"
        );
        jobTitle.textContent = response[i].job_title;
        jobDescription.textContent = response[i].job_url;
        div.appendChild(jobTitle);
        div.appendChild(jobDescription);
      }
    })
    .catch((err) => console.error(err));
}

标签： javascript dom-events handlebars.js

【解决方案1】：

将img 放在a 中。图像应该得到src，a 应该得到href。这非常麻烦，您应该为此类任务使用某种模板。模板只是一个代表所需 html 的字符串。

var div = document.querySelector("div");
var response = [{
    job_title: "gardner",
    job_url: "https://example.com"
  },
  {
    job_title: "sailor",
    job_url: "https://stackoverflow.com"
  },
];

for (let i = 0; i < response.length; i++) {


  var jobTitle = document.createElement("h2");
  var jobDescription = document.createElement("p");
  var jobImage = document.createElement("img");
  var jobLink = document.createElement("a");
  jobImage.setAttribute(
    "src",
    "https://play-lh.googleusercontent.com/kMofEFLjobZy_bCuaiDogzBcUT-dz3BBbOrIEjJ-hqOabjK8ieuevGe6wlTD15QzOqw"
  );
  jobImage.style.width = "50px";
  jobLink.setAttribute("href", response[i].job_url);
  jobLink.appendChild(jobImage);
  jobTitle.textContent = response[i].job_title;
  jobDescription.textContent = response[i].job_url;
  div.appendChild(jobLink);
  div.appendChild(jobTitle);
  div.appendChild(jobDescription);
}

&lt;div&gt;&lt;/div&gt;

编辑：现在效果相同，使用某种模板。

var div = document.querySelector("div");
var template = document.querySelector("#my-template").innerHTML;

var response = [{
    job_title: "gardner",
    job_url: "https://example.com"
  },
  {
    job_title: "sailor",
    job_url: "https://stackoverflow.com"
  },
];



for (let i = 0; i < response.length; i++) {

  var card_html = template;
  card_html = card_html.replace('{href2}', response[i].job_url)
  card_html = card_html.replace('{href}', response[i].job_url)
  card_html = card_html.replace('{title}', response[i].job_title)
  card_html = card_html.replace('data-src', 'src')
  
  var card = document.createElement("div");
  card.innerHTML = card_html;
  div.appendChild(card)

}

<div></div>

<div id="my-template" style="display:none">
  <div class="card">
    <a href="{href}">
      <img data-src="https://play-lh.googleusercontent.com/kMofEFLjobZy_bCuaiDogzBcUT-dz3BBbOrIEjJ-hqOabjK8ieuevGe6wlTD15QzOqw" style="width:50px">
    </a>
    <h2>{title}</h2>
    <p>{href2}</p>
  </div>
</div>

【讨论】：

谢谢你！抱歉，我是 Javascript 新手，但模板是什么意思？
所以区别是更短的语法？
如果您想在设计中进行更改，使用模板的 HTML 会更容易。