Adding div dynamically using button click in JavaScript / jQuery

Question

How do I dynamically add div on button click in JavaScript/jQuery? I want all the formatting of div having class "listing listing_ad job".

This is my code which I tried out, using jQuery.

 $('#btnAddtoList').click(function(){ var newDiv = $('<div class="listing listing_ad job"><h4><a>Some text</a></h4> </div>'); //newDiv.style.background = "#000"; document.body.appendChild(newDiv); });

 .listing { border-bottom: 1px solid #ddd; float: left; padding: 0 0 5px; position: relative; width: 559px; } .listing:hover { background: #f5f5f5 none repeat scroll 0 0; border-bottom: 1px solid #ddd; cursor: wait; } a:hover { color: #ff5050; } .subtitle { width: 430px; font-weight: normal; font-size: 12px; font-family: Arial; color: #7f7f7f; } .info { float: left; margin: 10px 15px 5px; min-width: 500px; clear: both; color: #7f7f7f; margin: 15px 44px 15px 0; overflow: hidden; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnAddtoList"> Add to list </button> <div class="listing listing_ad job"> <h4> <a> Excellent Opportunity For Internship at Diamond </a> </h4> <div class="subtitle"> Lahore, Punjab </div> <div class="info"> This is Info / Description. </div> </div> <!-- ************************ --> <div class="listing listing_ad job"> <h4> <!-- Src: http://jobs.mitula.pk/internship-program-lahore-jobs --> <a> Excellent Opportunity For Internship at Diamond </a> </h4> <div class="subtitle"> Lahore, Punjab </div> <div class="info"> This is Info / Description. </div> </div>

Jsfiddle: http://jsfiddle.net/mr4rngbL/3/

Answer 1

Yes, you can easily add a div on button click in jQuery. First, set up the click listener:

$('button').on('click', addDiv);

Then, create the function to add the div (here, the div is being added to the element with the class of container):

function addDiv() {
    $('.container').append('<div>').addClass('listing listing_ad job');
}

I hope this is helpful.

Answer 2

Yes, you can - by added jQuery to the script of the document, and wrpping the code in document.ready

$(function() {
    $('#btnAddtoList').click(function(){
        var newDiv = $('<div class="listing listing_ad job"><h4><a>Some text</a></h4> </div>');
      //newDiv.style.background = "#000";
       $('body').append(newDiv);
    });
});

Example http://jsfiddle.net/mr4rngbL/5/

Example for what you've asked in the comment: http://jsfiddle.net/mr4rngbL/6/

And LAST example based on your request in the comment: http://jsfiddle.net/mr4rngbL/7/

Answer 3

Here Pure JavaScript Solution

 function addDiv(parent_div, content, attrs) { var div = document.createElement('div'); var parent = document.getElementById(parent_div); for (var key in attrs) { if (attrs.hasOwnProperty(key)) { div.setAttribute(key, attrs[key]); } } div.innerHTML = content; if (parent) { parent.appendChild(div); } } var button = document.getElementsByTagName('button')[0]; if (button) { button.addEventListener('click', function() { // change dynamically your new div addDiv('parent', 'hi', { 'class': 'someclass someclass', 'data-attr': 'attr' }); }); }

 <button>Add Div</button> <div id="parent"> </div>