Understanding Templating

HTML

<script src="https://raw.github.com/documentcloud/underscore/1.4.2/underscore.js"></script>
<div id="container1"></div>

<div id="container2"></div>

<div id="container3"></div>
<script type="text/template" id="template3">
    Title123: <%=title%>
</script>

<div id="container4"></div>
<script type="text/template" id="template4">
    Title: <%=title%>
</script>

JavaScript

var template1 = "Title: Title1";
var compileTemplate1 = _.template(template1);
$("#container1").append(compileTemplate1());


var data2 = {title:"Title2"}
var template2 = "Title: <%=title%>";
var compileTemplate2 = _.template(template2);
$("#container2").append(compileTemplate2(data2));

var data3 = {title:"Title3"}
var template3 = $("#template3").html();
var compileTemplate3 = _.template(template3);
$("#container3").append(compileTemplate3(data3));


var data4 = {title:"Title4"}
var compileTemplate4 = _.template($("#template4").html());
$("#container4").append(compileTemplate4(data4));