使用模板文字使用javascript为title属性赋值

Question

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

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>

Answer 2

在标题值周围添加引号（"或'），因为标题值包含空格。

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>

Answer 3

您的模板缺少标题属性的双引号。

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

Answer 4

结果是<div title=example value to display> example value to display</div>。这是因为根本没有双引号这一事实。

应该是：

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