javascript - Using JQuery to inject an ejs template into html -

can html ejs template injected via jquery?

i have index file has navbar , content area, sample testbutton template trying render.

index.ejs

<ul>     .     .     <li id="listitem"><a href="#test_page">nav bar item</a></li> </ul>  <div id="display"> </div>  <script>     $('#listitem').click( function(){          // note - testbuttontemplate being passed in routes          $('#display').html( <%- render( testbuttontemplate, {} ) %> );     }); </script> 

testbutton.ejs:

<a href="#" class="btn btn-primary" id="test-button">     click me! </a> 

i did best simplify code, basically, when click on link nav bar, want dynamically load page in display div.

---

the nav bar works.
click functionality works.
if manuallay display ejs template in div, works.
ex:

<div id="display">     <%- render( testbuttontemplate, {} ) %> </div> 

---

otherwise, when try load page sample code above, error get:
"uncaught syntaxerror: unexpected token <" , raw html looks like:

. . <script> $('#listitem').click( function(){     $('#my-test').html( <a href="#" class="btn btn-primary" id="test-button">         click me!     </a>     ); }); </script> 

so can see html has been retrieved ejs template class, jquery not how formatting data. looks data needs surrounded in quotes, adding beginning , end quotes not solve problem.

i have tried seemingly every combination of quotes, escaped , unescaped html, storing data in variable first trying inject it, none working me.

is there obvious mistake i'm making? prefer solve problem given current tool set.

try loading template this:

<script> var template = new ejs({url: '/testbutton.ejs'}); $('#listitem').click( function(){      $('#display').html(template.render()); }); </script>