html template tag and jquery
I\'ve got this situation where I\'m trying to use the tag in my html source:
-
I believe that this site will help explain how the shadow dom works and how templates interact with them. http://robdodson.me/blog/2013/08/27/shadow-dom-the-basics/
Furthermore it is actually very simple to clone a node of a shadow template and using jquery is not even needed.
Here is a jfiddle that demonstrates it: http://jsfiddle.net/dtracers/fhWc3/1/
HTML:
<div id = "hoster"> <span class = "title">Title</span> <span class = "id">51ab89af</span> </div> <template id = "im-a-template"> <h1><content select =".title"></content></h1> <h1>Class Id: <content select = ".id"></content></h1> <input type="text" placeholder = "Name"></input> </template>Javascript:
// find where you want to put your shadow dom in var host = document.querySelector('#hoster'); var root = host.createShadowRoot(); // create the host root var template = document.querySelector('#im-a-template'); // this is the node of the object you wanted var documentFragment = template.content; // this is a cloned version of the object that you can use anywhere. var templateClone = documentFragment.cloneNode(true); root.appendChild(templateClone); // this empty root now has your template讨论(0) -
Try:
var myTemplate = $("#some-id").html().trim(); var myTemplateClone = $(myTemplate);讨论(0)
加载中...
- 热议问题