Question

68

How to select elements from < template> with jQuery

rated 0 times [ 74] [ 6] / answers: 1 / hits: 21604 / 10 Years ago, fri, december 5, 2014, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

collinisaaka

Add To Favorites

Follow

Total Points: 194

Total Questions: 105

Total Answers: 104

Location: Tonga

Member since Tue, Nov 30, 2021

3 Years ago

collinisaaka questions

1 Compare two arrays of objects, and remove if object value is equal

Wed, Mar 2, 22, 00:00, 2 Years ago

1 REACTJS giving the following error: TypeError: navigate.push is not a function

Tue, Nov 23, 21, 00:00, 3 Years ago

1 ReferenceError: Cannot access before initialization circular dependency

Fri, Jul 9, 21, 00:00, 3 Years ago

1 React Hook useEffect to fetch data from local json file to create a details page

Tue, Sep 15, 20, 00:00, 4 Years ago

1 create a curved bottom navigation (before after implementation)

Wed, Jul 1, 20, 00:00, 4 Years ago

View All

answered 10 Years ago kirstendevanb · Accepted Answer

HTMLTemplateElement saves the DOM into a seperate 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