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
Did you know?
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#