How to select elements from <template> with jQuery

Question

I have two similar selections. The first uses a <div> tag, which works fine, the second uses a newly <template> tag, which doesn't work anymore.

Can anyone tell me how to get this to work with jQuery using the <template> tag?

HTML

<div id="div">
    <div>content</div>
</div>

<template id="template">
    <div>content</div>
</template>

JavaScript

var $div = $('#div');
var $content = $div.find('div');
console.log($content); //works ($content.length == 1)

var $template = $('#template');
var $content = $template.find('div');
console.log($content); //doesn't work ($content.length == 0)

---

http://jsfiddle.net/s8b5w0Le/1/

Answer 1

HTMLTemplateElement saves the DOM into a separate attribute.

jQuery

<script src="jquery-3.1.0.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        var $div = $('#div');
        var $content = $div.find('div');
        console.log($content.text()); // output "content", inner div

        var $template = $('#template');
        var node = $template.prop('content');
        var $content = $(node).find('div');
        console.log($content.text()); // output "content", inner template
    });

JavaScript

document.createElement('template').content

Answer 2

I'm fairly certain this has to do with Chrome's use of shadow dom (thank Polymer... )

You can either try your luck using the /deep/ combinator (probably won't work on other browsers), but I think the most robust solution would be $template[0].outerHTML as in your comment if you just need the text.

If you need jQuery functionality, using $.parseXML (to avoid Chrome's native dom construction) would probably do the trick across all browsers (can confirm Chrome + FF).

Example here: http://jsfiddle.net/3fe9jjfj

var tc = $('#template')[0].outerHTML;

$template = $($.parseXML(tc)).contents();

console.log($template);
console.log($template.find('div'));

Both logs return as we'd expect, and $template can now be treated as an ordinary jQuery object.

Answer 3

As others have noted, Chrome puts <template> child elements into a shadow DOM. To access them:

// Access the JavaScript object for the template content
$('template')[0]

// Make a jQuery selection out of it
$($('template')[0])

// Now you can search it
$($('template')[0]).find('div.someclass').css('color','#000');

Answer 4

A way, too late for the party but I ended up doing this:

function resolveTemplate(id) {
  return $(id).contents();
}

...

var $searchIcon = resolveTemplate('#search-icon-template');
$('#div').append($searchIcon);

Answer 5

You can use all the JQuery methods as usual if the element inside the template element are wrapped with a container.

const temp = $("#template").contents().clone();
$(temp).find("h1").text("A dynamic title");
temp.appendTo($("#app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="app"></div>

<template id="template">
    <div class="container">
        <h1>lorem ipsum</h1>
        <p>lorem ipsum </p>
        <img src="" alt="">
    </div>
</template>

The container can also be appended dynamically with JQuery. Or if you don't want a container, you can append its content.

const temp = $('<div></div>').html($("#template").contents().clone());
$(temp).find("h1").text('dynamic title');
$(temp).find("p").text('But no container this time');
temp.contents().appendTo($("#app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="app"></div>

<template id="template">
    <h1>lorem ipsum</h1>
    <p>lorem ipsum </p>
    <img src="" alt="">
</template>

Answer 6

<template>
   <div class="template-container">
      <div class="content">content</div>
   </div>
</template>

var templateHtml = ('#template').html() // this will return the template container div
var template = $(templateHtml);
var content = template.find('.content');

console.log(content);

Answer 7

var $content = $template.content.find('div');

... instead of ...

var $content = $template.find('div');

Worked for me.

Answer 8

HTML5 template is display: none; by default, childNodes in template is invalid, if you inspect it in console you'll find something different