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文件旁边。

使用innerHTML在div内插入Img标签

3 个答案: