Creating dynamic div elements with a button click in JavaScript / jQuery

Question

Creating dynamic div elements with a button click in JavaScript / jQuery

Hey, do you know how to dynamically add a div when a button is clicked using JavaScript/jQuery? I want the added div to have the same formatting as the div with the class "listing listing_ad job".

Here is the code I have tried 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/

javascript jquery html css

Answer 1

Answer №1

Absolutely, you have the ability to do so - simply include jQuery in the script of the document, and ensure to encase the code within document.ready function.

$(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);
    });
});

Here is an example http://jsfiddle.net/mr4rngbL/5/

Additionally, here is an example demonstrating what you mentioned in the comment: http://jsfiddle.net/mr4rngbL/6/

Lastly, here is another example as per your request in the comment: http://jsfiddle.net/mr4rngbL/7/

Answer 2

Absolutely, you have the ability to do so - simply include jQuery in the script of the document, and ensure to encase the code within document.ready function.

$(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);
    });
});

Here is an example http://jsfiddle.net/mr4rngbL/5/

Additionally, here is an example demonstrating what you mentioned in the comment: http://jsfiddle.net/mr4rngbL/6/

Lastly, here is another example as per your request in the comment: http://jsfiddle.net/mr4rngbL/7/

Answer 3

Answer №2

Here is a Solution Using Pure JavaScript

function createNewDiv(parentId, text, attributes) {
  var newDiv = document.createElement('div');
  var parentElement = document.getElementById(parentId);

  for (var key in attributes) {
    if (attributes.hasOwnProperty(key)) {
      newDiv.setAttribute(key, attributes[key]);
    }
  }
  newDiv.innerHTML = text;
  if (parentElement) {
    parentElement.appendChild(newDiv);
  }
}

var clickButton = document.getElementsByTagName('button')[0];
if (clickButton) {
  clickButton.addEventListener('click', function() {
    // dynamically change the newly created div
    createNewDiv('container', 'Hello World!', {
      'class': 'some-class',
      'data-example': 'example'
    });
  });
}

<button>Add New Div</button>
<div id="container">

</div>

Answer 4

Here is a Solution Using Pure JavaScript

function createNewDiv(parentId, text, attributes) {
  var newDiv = document.createElement('div');
  var parentElement = document.getElementById(parentId);

  for (var key in attributes) {
    if (attributes.hasOwnProperty(key)) {
      newDiv.setAttribute(key, attributes[key]);
    }
  }
  newDiv.innerHTML = text;
  if (parentElement) {
    parentElement.appendChild(newDiv);
  }
}

var clickButton = document.getElementsByTagName('button')[0];
if (clickButton) {
  clickButton.addEventListener('click', function() {
    // dynamically change the newly created div
    createNewDiv('container', 'Hello World!', {
      'class': 'some-class',
      'data-example': 'example'
    });
  });
}

<button>Add New Div</button>
<div id="container">

</div>

Answer 5

Answer №3

A simple way to insert a div using jQuery is to do it on a button click. Start by adding a click event listener to the button:

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

Next, define the function that will insert the div (in this example, the div will be inserted into an element with the class name 'container'):

function insertDiv() {
    $('.container').append('<div>').addClass('entry entry_advertisement job');
}

I hope you find this solution useful.

Answer 6

A simple way to insert a div using jQuery is to do it on a button click. Start by adding a click event listener to the button:

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

Next, define the function that will insert the div (in this example, the div will be inserted into an element with the class name 'container'):

function insertDiv() {
    $('.container').append('<div>').addClass('entry entry_advertisement job');
}

I hope you find this solution useful.

Creating dynamic div elements with a button click in JavaScript / jQuery

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to incorporate classes into <li> elements within WordPress?

Exploring the beauty of ASCII art on a webpage

Using PHP and JavaScript to enhance functionality around a hyperlink

Issue with getStaticProps in Next.js component not functioning as expected

Steps to fully eliminate the recent action panel from Django's administrative user interface

I've encountered the error of receiving a __PHP_Incomplete_Class Object when attempting to create a session using jQuery-ajax

Navigate to a new page on button click using Row with Tanstack / React-Table and Typescript (2339)

Using Vue JS to apply a filter to data fetched from an API

What is the process for integrating internal PHP code into this HTML form instead of relying on an external PHP file?

Combining nested lists with the tag-it plugin from jQuery, you can create a list inside a list all

A tool developed in Javascript that allows for the conversion of .ini files to .json files directly on the client

Issue detected: The validation form is encountering errors due to a blank textarea when utilizing jQuery validate and AJAX for

Adjusting picture dimensions with percentages in canvas and jquery

Challenges of aligning a modal overlay in the middle of mobile screens

Attempting to implement scroll-based animation on my webpage

Customizing a ControlsFX PopOver in a JavaFX application

Guide on retrieving a value from a function that invokes $.getJSON

Utilize D3's pie chart to showcase the data in JSON's individual collections

In JavaScript, provide a boolean response to a callback function from a separate function

The malfunction of Bootstrap modal in iterative scenarios