Last Updated: February 25, 2016
·
1.696K
· alexanderbrevig

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>

https://github.com/AlexanderBrevig/jquery.copyAndAppend.js

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
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