javascript - 使用 HTML 标签中的 JS 变量在 Javascript 中动态创建 HTML

Question

我正在尝试使用 HTML 标签中的 JS 变量通过 JavaScript 动态创建 HTML 代码。然后代码通过 .innerHTML 插入到我的 HTML 文件中。

不起作用(我没想到它会真正起作用，但我不确定如何强制它起作用)是设置 id 和 margin-right 属性到 JS 变量(分别使用 dynamicID 和 equalMargin)。

var numberOfImages = 7
var equalMargin = 1; //(divElement.clientWidth - equalWidth*7) / 6;
var dynamicCode = "";
var dynamicID = "";
var i;
for(i = 0; i < numberOfImages - 1; i++)
{
	dynamicID = "navDot" + i + "";
	console.log(dynamicID);
	dynamicCode = dynamicCode + '<img src = "https://dl.dropboxusercontent.com/s/mvj24qzluobu098/seekDotEmpty.png?dl=0" alt = "emptyDot" id = dynamicID style = "max-height: 100%; margin-right = equalMargin;">';
}

Answer 1

只需结束字符串，添加变量，然后重新打开字符串即可。

此外，属性、等号 (=) 及其值之间没有空格。

var numberOfImages = 7
	var equalMargin = 1; //(divElement.clientWidth - equalWidth*7) / 6;
	var dynamicCode = "";
	var dynamicID = "";
	var i;
	for(i = 0; i < numberOfImages - 1; i++)
	{
		dynamicID = "navDot" + i + "";
		console.log(dynamicID);
		dynamicCode = dynamicCode + '<img src="https://dl.dropboxusercontent.com/s/mvj24qzluobu098/seekDotEmpty.png?dl=0" alt="emptyDot" id="' + dynamicID + '" style="max-height: 100%; margin-right: ' +  equalMargin + ';">';
	}