javascript - JavaScriptで要素のデータアイコンを設定する

Question

HTMLに次のボタン要素があります

<button id="play-pause" aria-hidden="true"></button>

jQuery Ready イベントで、次のコードを実行します。

$('#play-pause').attr('data-icon', '')

これにより、HTML要素が次のようになります

<button id="play-pause" aria-hidden="true" data-icon="&#xe00a;"></button>

ブラウザーで次のようにレンダリングされます (Chrome 安定版):

ただし、JavaScript コードを削除した場合は、手動で HTML を次のように変更し (JS が行っているのと同じことです)、ページを更新します。

<button id="play-pause" aria-hidden="true" data-icon="&#xe00a;"></button>

次に、次のようにレンダリングします。

違いは何ですか？

関係ないと思いますが、CSS は次のとおりです。

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
    font-family: '45sound';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-style:normal;
}

Answer 1

Unicode 値を使用:

$('#play-pause').attr('data-icon', '\uE00A');