Question

my jquery template displays [object Object] when I pass the following jquery anchor object.

    moreinfoAnchor = $("<a></a>");
    moreinfoAnchor.attr('id', 'moreLink-' + this.id);
    moreinfoAnchor.text("test");

jquery template code:

$("#test").tmpl({
   link: moreinfoAnchor
});

How do I display actual anchor with jquery template?

Answer 1

Here’s one way to do it.

Build your anchor tag with jQuery:

var moreinfoAnchor = $("<a></a>")
  .attr({
    'href' : 'http://www.example.com',
    'id' : 'moreLink'
  })
  .text("test");

Turn your jQuery anchor tag into a plain string:

var plainString = $('<div>')
  .append( moreinfoAnchor.clone() ).remove().html();

Then apply the template:

$("#test").tmpl({
  link: plainString
}).appendTo('#thediv');

You’ll also have to make sure your template is set up using the html template tag, something like this:

<script id="test" type="text/x-jquery-tmpl">
  <div>{{html link}}</div>
</script>