テンプレートリテラルを使用して、JavaScriptを使用してタイトル属性に値を割り当てる

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>

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>

しかし、実際に、それは悪い考えですHを作るこのようにTML。 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 3

あなたのテンプレートは、あなたのtitle属性の二重引用符が欠落しています。

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>`);