Is there any clean way to grab an HTML template placed in the <head> using jQuery?

Question 1

$($('.templates').html()) will struggle if the inner HTML of the "templates" class starts with a space, so you'd need $($('.templates').html().trim()) instead. You'll end up in further trouble though because the inner HTML of your script tag doesn't have a root node, so you'd instead need something like:

<script type="text/x-templates" class="templates">
    <div>
        <div class="template1">temp1</div>
        <div class="template2">temp2</div>
        ...
    </div>
</script>

You could then get the HTML of template1 with something like:

var templatesCollection = $($(".templates").html().trim());
alert(templatesCollection.children(".template1").html());

But, all this said, why not put each template in its own script tag with an ID? (Class doesn't make much sense unless you're planning on having more than one instance, and in a templating scenario I would assume that's not what you want.)

So something more like:

<script type="text/html" id="template1">
   <div>temp1</div>
</script>

And then a very simple selector: $("#template1").html()

Question 2

Try this:

var $templateHtml = $('.templates').html();
var $templates    = $('<div/>').html(templateHtml);

or alternatively, make it one line:

var $templates    = $('<div/>').html($('.templates').html());

Question 3

Edit: I think I initially misunderstood your question - I didn't realize you had multiple templates within the same script tag. I would suggest breaking each template into it's own tag, as that may be easier to manage (and then you don't have extra parsing and div tags just to keep them separate). For example, consider this for your template markup:

<script type="text/x-templates" class="template" id="template1">
    [template 1]
</script>

<script type="text/x-templates" class="template" id="template2">
    [template 2]
</script>

And something like this in your JavaScript:

// create a map of templates (keyed by the template's id)
var templates = {};
$('.template').each(function() {
    var $template = $(this);
    templates[$template.attr('id')] = $(this).html();
});

//usage
$('body').append(templates.template1);
$('body').append(templates.template2);

Here's a demo of it in action: http://jsfiddle.net/KyWj6/