Question

我遇到的问题是，当我在JavaScript和img标签中添加href链接时，图像将无法显示。

html='<div id="iw-container">'+'<a ><div class="iw-title">Hot Pot Restaurant </div> </a>'+ name+"<br>"+address+"<br>"+"<img src=/"+image+'</div>';

Answer 1

您的代码中似乎有很多错别字。

请参见下面的工作代码。

let address = 'An Address';
let name = 'Persons Name';
let image = 'https://images.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
let link = 'https://images.google.com/';

html='<div id="iw-container"><a href="'+link+'"><div class="iw-title">Hot Pot Restaurant </div> </a>'+ name+'<br>'+address+'<br><img src="'+image+'"></div>';

document.write(html);

Answer 2

尝试使用模板文字。读取代码更容易，更干净。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

const title = "Stack Overflow";
const link = "https://stackoverflow.com";
const image= "https://streamdata.io/wp-content/uploads/2018/04/stackoverflow.png";
const html = `<div id="iw-container">
          <h1><a href="${link}">${title}</a></h1><br>
          <img src="${image}">
        </div>`;
document.write(html);

Answer 3

您混合使用单引号和双引号，并且href也缺失。请尝试以下

html = '<div id="iw-container">' + '<a ><div class="iw-title">Hot Pot Restaurant </div> </a>' + name + '<br>' + address + '<br>' + '<img src="' + image + '"></div>';

如何通过JavaScript添加href和img标签

3 个答案: