javascript - HTML属性内でHTMLを使用できますか?

Question

たとえば、次のようなものがあるとします。

<div data-object="{'str': '<h1>This is a nice headline</h1>'}"></div>

これは HTML5 で許可されていますか? また、すべてのブラウザーで適切に表示されますか?

編集:適切に言えば、ブラウザは H1 を無視し、レンダリングしないことを意味します;)

Answer 1

はい、許可されていますが、機能させるには、二重引用符を使用して有効な JSON にする必要があります。

<div data-object='{"str": "<h1>This is a nice headline</h1>"}'></div>

今それを解析するには：（jQueryはそれをJSONにすべて単独で解析します）

var element = $("div").eq(0);
var rawData = element.data("object");
var rawHTML = rawData["str"];
$(rawHTML).appendTo("body");

ライブ テスト ケース。

Answer 2

はい、ブラウザは属性内の HTML タグをレンダリングしません。これは、後で要素を移動して表示する場合によく使用されます。唯一の問題は、これは DOM で要素を作成しないため、これが進むべき道ではないことです。したがって、はるかに遅くなります。

ページがロードされたときに非表示になっている要素を再利用する方法を見つけるか、代替/より良い方法を求めてください。