Jqueryを使用して次のようなHTMLを作成したいと思います。
<li><a href="#"><span class="play"></span><span class="trackName">Track Name</span></a></li>
簡単そうに見えますが、アンカーテキストの一部としてHTMLタグを含める方法がわかりません。
私が次のようなものを使用する場合:
$("<a />", { text: $('<SPAN class="play" />') + "Track Name" })
次に、スパンタグがエスケープされます。
これを行うには、次のようないくつかの方法があります(ただしこれらに限定されません)。
_// one big string
$('<a href="#"><span class="play"></span><span class="trackName">Track Name</span></a>')
// create <a> then append() the span
$('<a></a>').attr("href","#")
.append('<span class="play"></span><span class="trackName">Track Name</span>');
// create <a> then set all of its contents with html()
$('<a></a>').attr("href","#")
.html('<span class="play"></span><span class="trackName">Track Name</span>');
// append spans created earlier:
var spans = $('<span class="play"></span><span class="trackName">Track Name</span>');
var a = $('<a></a>').append(spans);
_
.html()
は既存のすべてのコンテンツを置き換え、.append()
は最後に追加することに注意してください。したがって、例に2つのスパン要素があるとすると、それらを個別に作成して、一度に1つずつ追加できます。
_$('<a href="#"></a>').append('<span class="play"></span>')
.append('<span class="trackName">Track Name</span>');
_
内部jQueryコンストラクターを削除します。
$("<a />", { text: '<SPAN class="play" /> Track Name' });
jsFiddle 。
または、リンクにHTMLとしてコードが必要な場合:
$("<a />", { html: '<SPAN class="play" /> Track Name' });
var link = $("<a>");
link.attr("href","http://www.google.com");
link.attr("title","Google.com");
link.text("Google");
link.addClass("link");
これは私が最終的に行ったものです:
$('<a>', { className: 'trackName', href: contentPath + 'tracks/' + t.fileName } )
.append('<span class="play" />')
.append('<span class="trackName"></span>')
.append(t.trackName)
//overwrites the innerHTML of all anchors *selector must be changed to more specific
$('a').html('<span class="play"></span><span class="trackName">Track Name</span>');
//wraps existing text and prepends the new span
$('a').wrapInner('<span class="trackName">')
.prepend('<span class="play"></span>');