Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-git.js"></script>
        <meta charset="utf-8">
        <title>JS Bin</title>
    </head>
    <body>
​
        <p>Press the button to download more items.</p>
        <button class="downloadBtn">Download Items</button>
        <ol class="target"></ol>
​
​
        <!-- MOCK BACKEND RESPONSE -->
        <script type="my/template" id="tmpl">
    <div class="pretend_this)_is_a_huge_chunk_of_html">
        <h1>Header I don't need</h1>
        <p>paragraphs I don't need</p>
        <button>button I don't need</button>
        <input placeholder="input I don't need" />
       <ul id="resultList" class="results">
         <li>List items I want to keep</li>
         <li>List items I want to keep</li>
         <li>List items I want to keep</li>
            </ul>
            </div>
        </script>
        <script>
            var $tmpl = $("#tmpl")
            function mockGet(){
                var dfd = $.Deferred(),
                    time = Math.floor(1000*Math.random());
                setTimeout(function(){
                    dfd.resolve($($tmpl.html()));
                },time);
                return dfd.promise();
            }
​
        </script>
        <!-- END MOCK BACKEND RESPONSE -->
​
    </body>
</html>
 
​
 
$(function(){
​
    var $button = $(".downloadBtn"),
        $target = $(".target"),
        items = [];
​
    $button.on("click",addItems);
​
    function addItems(){
        mockGet().then(onResponse);
    }
​
    function onResponse(response){
        var $keep = $(response).find(".results li").clone();
        items.push($keep);
        $target.append($keep);
    }
​
});
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
shanimalpro
0viewers