点击按钮增加Div

Question

Need javascript for incrementation...

I have two with class names, parent and child (child inside the parent).

Each has a button outside them. If I click the button outside the parent, the div should be incremented with child inside it.

And if the button outside the child is clicked, the child div must be incremented.

Find the below link as demo. LINK

HTML code is

<div class="parent">
     <div class="child">
     </div><br>
     <a href="#" class="inc-child">Add one more child</a>
</div><br>
<a href="#" class="inc-parent">Add one more Parent</a>

Answer 1

You can use a click handlers with event delegation and cloning like below

jQuery(function($){
    var _parent = $('.parent').eq(0).clone();
    $(document).on('click', '.inc-child', function(){
        var $p = $(this).parent();    
        $p.find('.child').first().clone().insertBefore(this)
    })
    $('.inc-parent').on('click', function(){
        _parent.clone().insertBefore(this)
    })
})

Demo: Fiddle

Answer 2

Check this JS

$(document).ready(function() {

$("button[name='addDom']").click(function() {
    var domElement = $('<div class="module_holder"><div class="module_item"><img src="images/i-5.png" alt="Sweep Stakes" /></div></div>');
    $(this).after(domElement);
});

});