How can we add a class to div elements that are dynamically fetched using AJAX in HTML?

Question

How can we add a class to div elements that are dynamically fetched using AJAX in HTML?

I am including additional HTML content upon clicking a "load more" button using the following JavaScript function:

function addStuff() {
  $.get('page-partials/more-stuff.html', function(stuff) {
    $('#load-button').append(stuff);
  });
};

The issue I'm encountering is that this new content is inserted into a container with a varying height, and I would like to animate it downwards as more items are added. To achieve this effect, I need to assign a dynamic class to the divs inside 'more-stuff.html' every time that template is appended.

For example:

<div class='stuff added1'></div>

Subsequently, on the next iteration:

<div class='stuff added2'></div>

Is there a way to accomplish this? Alternatively, does anyone have suggestions for animating changes in height from an unknown nonzero value to another unknown nonzero value?

javascript jquery html css ajax

Answer 1

Answer №1

How about this?

let total = 0;
$.get('page-partials/additional-things.html', function(things) {
    total++;
    $('#load-btn').append(things).addClass('new-thing added'+total);
});

Answer 2

How about this?

let total = 0;
$.get('page-partials/additional-things.html', function(things) {
    total++;
    $('#load-btn').append(things).addClass('new-thing added'+total);
});

Answer 3

Answer №2

Interestingly, Vivek proposed an alternative approach that looks something like this:

var element = '<div style="height:200px;">Dynamically appended div</div>'; // ajax response
var height = $(element).height(); // determine the height
$('.element').append(element).css('height', height); // update the height after appending

.element {
    height:60px;
    width:100px;
    border:2px solid #f00;
    -webkit-transition: height 0.8s ease-in-out;
    -moz-transition: height 0.8s ease-in-out;
    -o-transition: height 0.8s ease-in-out;
    transition: height 0.8s ease-in-out; /* CSS3 transition for animating height */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='element'></div>

Answer 4

Interestingly, Vivek proposed an alternative approach that looks something like this:

var element = '<div style="height:200px;">Dynamically appended div</div>'; // ajax response
var height = $(element).height(); // determine the height
$('.element').append(element).css('height', height); // update the height after appending

.element {
    height:60px;
    width:100px;
    border:2px solid #f00;
    -webkit-transition: height 0.8s ease-in-out;
    -moz-transition: height 0.8s ease-in-out;
    -o-transition: height 0.8s ease-in-out;
    transition: height 0.8s ease-in-out; /* CSS3 transition for animating height */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='element'></div>

Answer 5

Answer №3

To enhance the functionality, consider using the added function in conjunction with each call to addStuff

function addStuff() {
  // Obtain a jQuery promise object by returning from `addStuff`
  return $.get('page-partials/more-stuff.html', function(stuff) {
    $('#load-button').append(stuff);
  });
}; 

var added = function() {
  $(".stuff").each(function(index) {
    $(this).addClass("added" + index + 1)
  })
}

addStuff().then(added);

Answer 6

To enhance the functionality, consider using the added function in conjunction with each call to addStuff

function addStuff() {
  // Obtain a jQuery promise object by returning from `addStuff`
  return $.get('page-partials/more-stuff.html', function(stuff) {
    $('#load-button').append(stuff);
  });
}; 

var added = function() {
  $(".stuff").each(function(index) {
    $(this).addClass("added" + index + 1)
  })
}

addStuff().then(added);

How can we add a class to div elements that are dynamically fetched using AJAX in HTML?

Answer №1

Answer №2

Answer №3

Similar questions

Strange behavior in Angular 4 routing: Child module not rendering unless the page is manually refreshed

You must use the 'new' keyword to invoke the class constructor NextResponse | Implementing middleware in Next.js | Implementing role-based protection for routes in Next.js |

Prevent floating labels from reverting to their initial position

Having trouble vertically aligning text in Bootstrap 4?

Hide modal once form has been successfully submitted

Issues with form_valid in django

Chromium CSS blend mode problem

Generating a continuous visual display using a dynamic div with looping animation in JavaScript

Utilize AJAX to extract JSON data

Tips for Sending Props While Utilizing CSS Modules

What steps are necessary to facilitate payments through Stripe instead of directly on my Wordpress website?

Transform your HTML audio player into a Vue component

Having trouble finding the ./.env file in Gatsby. Encountering an env-cmd error

Guide to positioning front layer in CSS3

Is there a way to customize the email content for Opencart orders according to our preferences? Can we make changes to it

Is it possible to access the serial port using HTML5?

Exploring sections on a Three.js Cylinder

Content in tab remains stagnant

Apollo Server Studio is failing to detect the schema configured in Apollo setup

Checking a condition with a for loop in Javascript