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

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

template-literals ecmascript-6 javascript

1

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 年前

1

0

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

2

0

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

3

0

Royal 1 年前

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

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