当作为类属性追加时，Javascript字符串按空格分割

Question

我正在尝试动态地将类附加到<a>元素，如下所示。

$(document).ready(function() {
  var class = "abc def ghi";
  var url = "something";
  var innerText = "some random text";

  var innerLink = "<a href=" + url + "><i data-name=" + class + " class=" + class + "></i><span>" + innerText + "</span></a>";

  $("#test").append(innerLink);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">

</div>

字符串类之间可以有空格。当附加发生时，结果字符串看起来像<a href="something"><i data-name="abc" def ghi class="abc"></i><span>some random text</span></a>

（检查结果中的元素以查看它）。

但我期待的是<a href="something"><i data-name="abc def ghi" class="abc def ghi"></i><span>some random text</span></a>

代码有什么问题？

Answer 1

如果值为空格，则需要使用另一个包装引号：

class='" + class + "'></i><span>" +
//    ^             ^  ------check this

var innerLink = "<a href='" + url 
                + "'><i data-name='" + class + "' class='" + class + "'></i><span>" + 
innerText + "</span></a>"; //-----^-------------^-------^-------------^

Answer 2

您缺少类和名称属性的内部引号。

＆＃13;

＆＃13;

$(document).ready(function() {
  var class = "abc def ghi";
  var url = "something";
  var innerText = "some random text";

  var innerLink = "<a href=" + url + "><i data-name='" + class + "' class='" + class + "'></i><span>" + innerText + "</span></a>";

  $("#test").append(innerLink);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">

</div>

＆＃13;

＆＃13;

＆＃13;