'optgroup'元素标签不是在空格后读取字符串

Question

下面代码运行时,标签不会在空格后读取字符串'data'.我已尝试使用optgroup元素上的一些CSS但它没有对其标签进行任何更改.

var data = "Names of Meters";
var func = function() {
  var options = 
      "<optgroup label=" +data+ ">"
        +'<option value="Meter1" >' + "Temperature" + '</option>'
        +'<option value="Meter2" >' + "Wave" + '</option>'
        +'<option value="Meter3" >' + "Wind Speed" + '</option>'
      + "</optgroup>";
  return options
  }
  document.getElementById("demo").innerHTML = func();

   <select type='list' name='sensors' id ="demo" multiple></select>

Answer 1

您错过了标签名称的引号.

var data = "Names of Meters";
var func = function() {
    // here, surround the 'data' with single quotation marks
    var options = "<optgroup label='" + data + "'>"
        + '<option value="Meter1" >' + "Temperature" + '</option>'
        + '<option value="Meter2" >' + "Wave" + '</option>'
        + '<option value="Meter3" >' + "Wind Speed" + '</option>'
        + "</optgroup>";
    return options;
};
document.getElementById("demo").innerHTML = func();

<select type='list' name='sensors' id ="demo" multiple></select>

但是为什么即使没有引号,它仍然会读到白色空间？

因为属性值周围的引号不是必需的.例如,您可以使用

<input value=4 />

但是,有时需要使用引号(如本例所示).如果值包含空格,则无法正确显示.

请参阅HTML属性