在 html 代码中添加字符串变量

我有一个 html 块，其中包含几个按钮和一个文本输入。该文本输入的占位符应在不同情况下更改。 因此我添加了一个字符串变量。然后我将 html 放入另一个字符串变量中：

var dataType;

var htmlBlock = `<div class="icon negative big toleft" id="cancel-btn"><i class="fas fa-minus-circle"></i></div>
<div class="icon add big toleft"><i class="fas fa-check-circle"></i></div>
<input type="text" class="contact-input" style="margin-bottom: 5px;" maxlength="50" name="my-contact-phone" data-name="Name" placeholder=${dataType}>`

正如你所看到的，在html代码的最后一行，我在占位符部分添加了${dataType}。

然后我将它与这些代码一起使用：

if (document.getElementsByClassName('.js-phone'))
{
  dataType = "Add your number "
  this.html = this.phone.html();
  this.phone.html(
    htmlBlock
  )
};

编译后，在文本输入占位符中，出现以下文本：undefined

谁能帮助我，我该怎么做？ 我们将不胜感激您的帮助。

就你而言，你的dataType应该定义变量before您将在字符串文字（模板）中使用该变量：

var dataType = 'HELLO';
var htmlBlock = `<div class="icon negative big toleft" id="cancel-btn"><i class="fas fa-minus-circle"></i></div>
<div class="icon add big toleft"><i class="fas fa-check-circle"></i></div>
<input type="text" class="contact-input" style="margin-bottom: 5px;" maxlength="50" name="my-contact-phone" data-name="Name" placeholder="${dataType}">`;

console.log(htmlBlock);

UPDATED:

在这种情况下你可以这样做：

var getHtmlBlock = function(dataType) {
    return `<div class="icon negative big toleft" id="cancel-btn"><i class="fas fa-minus-circle"></i></div><div class="icon add big toleft"><i class="fas fa-check-circle"></i></div><input type="text" class="contact-input" style="margin-bottom: 5px;" maxlength="50" name="my-contact-phone" data-name="Name" placeholder="${dataType}">`;
};

var myDataType =  getHtmlBlock('Add your number');
console.log(myDataType); // replaced string with argument value;

将您的字符串放入函数中，然后替换${dataType}通过作为参数传递。