Copy and append elements with EASE, fill with data from JSON hash
So, time and time again I've had the simple need to do this:
1) Find a template element
2) Copy the element
3) Fill the copy with new data
4) Append the copy as the last sibling of the template element
So, I wrote a jQuery plugin to do exactly that.
Given the following HTML:
<div id="container">
<div class="template" style="display:none;">
<h1 class="header">Header</h1>
<ul>
<li class="line0">Line 0</li>
<li class="line1">Line 1</li>
<li class="line2">Line 2</li>
</ul>
</div>
</div>
Create and append a copy of the .template to the #container by this jQuery call:
$("#container").copyAndAppend("template", {
"header": "Header from js",
"line0":"Line 0 from js",
"line1":"Line 1 from js",
"line2":"Line 2 from js"
});
Will result in this HTML:
<div class="" style="display: block;">
<h1 class="header">Header from js</h1>
<ul>
<li class="line0">Line 0 from js</li>
<li class="line1">Line 1 from js</li>
<li class="line2">Line 2 from js</li>
</ul>
</div>
Written by Alexander Brevig
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Html
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#