使用innerHTML在div中插入Img标记

Question

我正在尝试使用innerHTML在一个div中包含多个标记。这里有一个例子可以更好地解释我的问题。

var y = "jack.jpg";
var x = "Jack";
var f = "Hello world!";
document.getElementById("maindDiv").innerHTML += "<div class = 'result'>" + ": " + "<img src="y"/>" + ": " + x + ": " + f + "</div>" ;

正如你所看到的，我有太多的撇号，我不知道如何使用它们，所以在src中有一个变量而不是字符串。非常感谢。

Answer 1

检查报价

document.getElementById("maindDiv").innerHTML += "<div class = 'result'>" + ": " + "<img src='"+y+"'/>" + ": " + x + ": " + f + "</div>" ;

var y = "jack.jpg";
var x = "Jack";
var f = "Hello world!";
document.getElementById("maindDiv").innerHTML += "<div class = 'result'>" + ": " + "<img src='"+y+"'/>" + ": " + x + ": " + f + "</div>" ;

<div id="maindDiv"></div>

Answer 2

您也可以使用模板字符串：

var y = 'jack.jpg';
var x = 'Jack';
var f = 'Hello world!';
document.getElementById("maindDiv").innerHTML += `<div class='result'> + : + <img src=${y}/> + : + ${x} + : ${f} + </div>`;

但请注意：

1( 这些变量是字符串(y，x，f(，您忘记了引号；

2( 使用变量时不能使用引号，必须在创建时使用。

Answer 3

只需更改y即可创建动态变量来更改图像：

您可以选择将它们放入for循环中，并在数组上迭代以更改y:的值

var y = "jack.jpg";
var tagMaker = "<img src='./" + y + "'>";

现在使用这个：

document.getElementById("maindDiv").innerHTML += tagMaker 

假设：您的图像位于html文件旁边。