如何为显示用于网页的图像的内联元素编写 HTML 代码？

Question

我正在通过 Cengage (MindTap) 在 interactive/follow-along 程序中编写我的第一个代码。该程序指示我 "write the HTML code for the inline element showing the sky image to use in the webpage." 我应该创建一个名为 imgStr 的变量来存储此文本字符串：

    <img src='sd_skyMap.png' />

其中 Map 是 mapNum 变量的值（有 23 个文件，标题为 sd_sky0、sd_sky1、sd_sky3，依此类推。它说使用 + 运算符将文本字符串组合在一起，并在文本字符串中包含 single-quote 个字符。

我无法让天空图像出现在网页上以挽救我的生命。

我已经尝试通过我的大学提供的导师，但仍然无法显示图像。

    var imgStr = "<img src='sd_sky0 + sd_sky1 + sd_sky2 + sd_sky3 +
    sd_sky4 + sd_sky5 + sd_sky6 + sd_sky7 + sd_sky8 + sd_sky9 + 
    sd_sky10 + sd_sky11 + sd_sky12 + sd_sky13 + sd_sky14 + sd_sky15 
    + sd_sky16 + sd_sky17 + sd_sky18 + sd_sky19 + sd_sky20 + 
    sd_sky21 + sd_sky22 + sd_sky23' + mapNum + '.png' />";
    document.getElementById("planisphere").insertAdjacentHTML() = imgStr;

将代码插入jshint.com后，它显示了一个警告和一个未使用的变量。

（分配错误。）

document.getElementById("planisphere").insertAdjacentHTML() = imgStr;

并且 mapNum 是一个未使用的变量。

Answer 1

InsertAdjacentHTML 接受两个字符串作为参数。

第一个参数是 position，它采用四个静态值之一。

第二个参数是你要插入的HTML字符串。

您想要的示例可以是：

document.getElementById("planisphere").insertAdjacentHTML('afterbegin', imgStr);

Answer 2

您的代码有两个问题，第一个是您需要运行遍历不同的图像文件并分别添加每个文件。在您提供的代码中，所有图像的名称都合并为一个。

第二个问题是您对insertAdjacentHTML()函数的使用。该函数期望将新标签的位置和标签本身作为参数，none 被传递。 Check here 以获得更好的解释。

假设您有 n 个图像要添加为 n 个标签，您可以尝试这样的操作：

// variable to hold the total number of images used
var numberOfImages = 23;

// we loop trough all images, where i will count from 0 to numberOfImages
for (var i = 0; i < numberOfImages; i++) {
    // on each step of  the loop we add a new img tag with sd_skyi as source
    document.getElementById("planisphere")
        .insertAdjacentHTML('afterend', "<img src='sd_sky" + i + ".png' />")
}

如果您按原样使用此摘录，它将向 ID 为 planisphere 的元素添加 23 个 img 标签。

Answer 3

您快到了，只需使用 document.insertAdjacentHTML()

附加 beforeend

const imgStr = `<img src='sd_sky0 + sd_sky1 + sd_sky2 + sd_sky3 +
sd_sky4 + sd_sky5 + sd_sky6 + sd_sky7 + sd_sky8 + sd_sky9 + 
sd_sky10 + sd_sky11 + sd_sky12 + sd_sky13 + sd_sky14 + sd_sky15 
+ sd_sky16 + sd_sky17 + sd_sky18 + sd_sky19 + sd_sky20 + 
sd_sky21 + sd_sky22 + sd_sky23' + mapNum + '.png' />`;

document.getElementById("planisphere").insertAdjacentHTML('beforeend', imgStr);

<div id = "planisphere">
</div>

如何为显示用于网页的图像的内联元素编写 HTML 代码？

How to write the HTML code for the inline element showing an image for use in webpage?

javascript

unused-variables