如何在模板字面量的HTML属性双引号中嵌入JS变量？

你只需要用模板字面量的变量插值语法${变量名}，把变量放到id属性的双引号里即可，修正后的代码如下：

const newDiv = document.createElement('div');
newDiv.innerHTML = `
    <button class='btn btn-download'>
        <span class='icon'>&#8681;</span>
        Download Subtitle
    </button>
    <span>as</span>
    <select id="${outputFormatSelectId}">
        <option value="text">Text</option>
        <option value="text-with-time">Text with Time</option>
        <option value="json">JSON</option>
        <option value="srt">SRT</option>
    </select>`;

关键说明： #

• 模板字面量中嵌入变量必须用${}包裹变量名，这是ES6模板字符串的标准语法
• HTML属性的引号（这里用双引号）可直接与模板插值语法配合，无需额外转义，模板字面量会自动将变量值替换进去，生成正确的HTML属性值

内容的提问来源于stack exchange，提问作者Shibaji Biswas