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/

something like what?

2pha
– 2pha

2016-04-23 15:39:46 +00:00
Commented Apr 23, 2016 at 15:39 — 2pha
– 2pha, Commented Apr 23, 2016 at 15:39
@2pha ... I was having difficulty posting the question.

Asad
– Asad

2016-04-23 15:41:26 +00:00
Commented Apr 23, 2016 at 15:41 — Asad
– Asad, Commented Apr 23, 2016 at 15:41

Alon Eitan · Accepted Answer · 2016-04-23 16:24:21Z

3

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/

edited Apr 23, 2016 at 16:24

answered Apr 23, 2016 at 15:41

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Asad Over a year ago

If I add textbox to my jsfiddle, then how can I put the textbox value instead of 'some text' on button click ? JavaScript/ jQuery code

Asad Over a year ago

What if I want to add div class="subtitle" and div class="info" tags dynamically with the help of textboxes ?

Alon Eitan Over a year ago

@Asad Added another example for setting class dynamically, but please avoid asking additional request, and post a new question instead.

0xdw · Accepted Answer · 2016-04-23 15:55:57Z

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>

edited Apr 23, 2016 at 15:55

answered Apr 23, 2016 at 15:44

0xdw

3,8522 gold badges29 silver badges44 bronze badges

Comments

Brett Hartman · Accepted Answer · 2016-04-23 15:40:39Z

2

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.

answered Apr 23, 2016 at 15:40

Brett Hartman

565 bronze badges

Collectives™ on Stack Overflow

Adding div dynamically using button click in JavaScript / jQuery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related