Templates are there for you to CLONE them.
Given this HTML code:
<template id="add-feeds">
<ul class="search-ac" id="tag_list" name="tag_list"></ul>
</template>
if you try something like this, it will NOT work (will return null
):
var ul = document.getElementById('tag_list'); // ul is *null*
THE WAY TO GO IS:
clone the template (think about it of instantiating a class).
Let me add a div
to your base html:
<template id="add-feeds">
<ul class="search-ac" id="tag_list" name="tag_list"></ul>
</template>
<div id="show_list"></div> //div used as DOM-entry-point for our new created list
Now clone the template:
var template= document.querySelector("#add-feeds");
my_template_clone = template.content.cloneNode(true); // clone the template
var my_ul = my_template_clone.getElementById('tag_list'); //now you can find the *ul*
var newLI = document.createElement("LI"); //create random stuff
newLI.innerHTML="hello";
my_ul.appendChild(newLI); //append it to the ul
var div = document.getElementById('show_list');
div.appendChild(my_ul); //now add it into the DOM
Here you have a working jsfiddle