代码之家 › 专栏 › 技术社区 › Shibaji Biswas

如何在Template literal的双引号内的html div id中编写JavaScript变量?

template-literals ecmascript-6 javascript

Shibaji Biswas · 技术社区 · 1 年前

我有这个代码:

        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>`;

注意事项 <select id="outputFormatSelectId"> 有一个id outputFormatSelectId 。实际上,这个id是一个有值的变量。但我不明白如何将此变量放入**id中= **

虽然这不是完整的代码,但只是相关的代码。如果有什么不清楚的地方,请要求我澄清。

实际上,我的困惑是关于模板文字的。当代码块位于模板文本内时,我如何在该模板文本中使用另一个变量?

2 回复 | 直到 1 年前

partho 1 年前

正如@David在评论中所说,你需要这样的东西:

<select id="${outputFormatSelectId}">

因此,您的更正代码将是:

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>`;

Tgralak 1 年前

你是这个意思吗?

    const outputFormatSelectId = "this-is-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>`;

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Royal 1 年前

通过使用 ${outputFormatSelectId} 在模板文本中,您会告诉JavaScript计算其中的表达式 ${} 并将其值插入到字符串中。

这样,如果 outputFormatSelectId 是一个包含字符串值的变量(如“mySelectId”),它将作为 id 属性的值。

推荐文章

Shibaji Biswas · 如何在Template literal的双引号内的html div id中编写JavaScript变量?

1 年前

GulgDev · 为什么不将属性设置为无效值?

1 年前

Koffee · 动画继续使用update()重新启动,而不是在Phaser 3中正常播放

2 年前

Monnt · 如何查看数组是否包括具有特定值的嵌套数组?

2 年前

JsCoder · 用ECDSA对C语言中的数据进行加密#

2 年前

dsi · 排序功能可实现多列的自定义差异

2 年前

huz3y · 如何在JavaScript中基于另一个变量值构建变量?如何重新分配它的值并对该变量执行方法?复制

2 年前

Darigan · clearTimeout将一个函数中的计时器与另一个函数(React.js)一起超时

2 年前

Joseph · 仅在React和JS中生成深色

2 年前

Joseph · 在Javascript中检索一些文本

2 年前