使用HTML标记中的JS变量在Javascript中动态创建HTML

Dynamically create HTML in Javascript using JS variables within HTML tags

本文关键字：HTML Javascript 动态 创建 变量 使用 JS      更新时间：2023-09-26

我正在尝试使用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;">';
}

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

此外，属性、等号（=）及其值之间不存在空格。

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 + ';">';
	}

相关文章：