Untitled

<html>
<body>
<head>
</head>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
</head>

<button id="action">Dodaj</button>
<button id="shake">Protresi</button>
<div id="container"></div>


<script type="text/javascript">

//tek kada se ucita DOM javascript se može izvoditi
$(document).ready(function () {
    //kada se klikne button koji ima id=action dodaj ovo sto je u append
    // u div koji ima id container
    //APPEND --> dodaje sadržaj koji se nalazi kao parametar u append, na kraj svakog elementa u skupu elemenata
    $("#action").click(function () {
        $('#container').append('<div><input type="checkbox" /> <img src="https://www.google.com/images/errors/logo_sm_2.png" alt="" /></div>');
    });
    //kada se klikne button protresi(ima id=shake)
    //pronađe se input type=checkbox koji ima kvacicu na sebi to ti je ovo :checked
    // .next pronađe njegov susjedni element koji je tipa img i napravi efekt shake
    //mozes jos na netu pronaci sta koja funkcija znaci
    $("#shake").click(function() {
        $('input[type="checkbox"]:checked').next("img").effect("shake", {times: 2}, 1000);
    });
});

</script>
</body>
</html>