javascript - 使用模板文字通过 javascript 将值分配给 title 属性

Question

我需要分配使用java脚本创建的div的标题属性 我面临的问题是，当标题包含多个由空格分隔的单词时，示例代码为

let value = "example value to display";
$("#parentDiv").append(`<div title=${value}> ${value}</div>`);

我得到的结果是

<div title="example" value to display> example value to display</div>

我不确定问题是什么，最有可能的是模板文字假设空格是字符串的末尾，任何人都有解决方案请帮忙

Answer 1

包含空格或其他非字母数字字符的属性必须用 " 或 ' 括起来:

let value = "example value to display";
$("#parentDiv").append(`<div title="${value}"> ${value}</div>`);

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

但实际上，以这种方式构建 HTML 并不是一个好主意。 jQuery 具有设置元素属性和文本的方法。因此，继续使用它们:

let value = "example value to display";
$("#parentDiv").append($('<div>').attr('title', value).text(value));

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