Question

If a user checks a form checkbox I want to create a new div. Dynamic data is loaded from ajax and php. I am asking how to create it with JS or jQuery. A simplified version will look something like

<div id="ajaxSRC1" class="CLASS">
   <a href="javascript:void(0)" onmouseover="return myFunction('ajaxSRC5', 'ajaxSRC6')">
      <img src="ajaxSRC2" width="ajaxSRC3" height="ajaxSRC4" alt="..." />
   </a>
</div>

Answer 1

Try this:

Inside the checkbox click handler:

$.ajax({
    type : 'post',
    url : 'test.php?id=52454',
    dataType : 'json',
    success : function (obj) {

        //construct and create the element
        var content = $('<div id="' + obj.ajaxSRC1 + '" class="CLASS">'
                    + '<a href="#">'
                    + '<img src="'+obj.ajaxSRC2+'" width="'+obj.ajaxSRC3+'" height="'+obj.ajaxSRC4+'" alt="..." />'
                    + '</a></div>');

        // bind mouseover event to the anchor tag
        content.find('a').mouseover(function() {
            myFunction(obj.ajaxSRC5, obj.ajaxSRC6);
            return false; // alternative to href="javascript:void(0)"
        });

        // append the newly created div to DOM
        divContainer.append(content);

    }
});