Change div content dynamically with jQuery

Question

I'm wondering how I can change the html content of a div.

This is the starting point:

<div id="container">
    <div class="fruits">apple</div>
    <div class="fruits">banana</div>
    <div class="fruits">strawberry</div>
</div>

Output on page:

apple
banana
strawberry

The output should be changed to:

cat
dog
fish
...or something like this.

I guess I have to iterate over the class "fruits" with .each() or something. I know how to change single elements or content of a single div, but i don't understand how that works when you have the same class for multiple times.

class="fruits"
class="fruits"
class="fruits"
....

Hope you can help.

Where are you storing your Animals strings?

Roko C. Buljan
– Roko C. Buljan

2015-01-23 00:50:17 +00:00
Commented Jan 23, 2015 at 0:50 — Roko C. Buljan
– Roko C. Buljan, Commented Jan 23, 2015 at 0:50

Roko C. Buljan · Accepted Answer · 2022-09-09 07:40:13Z

JavaScript

const items = ["cat", "dog", "fish"];

document.querySelectorAll(".item").forEach((el, i) => {
  el.textContent = items[i];
});

<div id="container">
  <div class="item">apple</div>
  <div class="item">banana</div>
  <div class="item">strawberry</div>
</div>

jQuery

var animals = ["cat", "dog", "fish"];

$(".fruits").text(function(i){
  return animals[i];
});

Store your animals into an Array,
Loop with the .text() callback over your .fruits selector, and modify the text by returning the index of the animals that matches the current index i (animals[i]).

In case you have more selectors elements than the Array length you can modulo the result using: return animals[i%animals.length];

jsBin demo

Since it's not clear where you're storing your Animals strings,
you can use also this simple example to achieve what you need and that's using data-* attribute:

<div class="fruits" data-to="cat">apple</div>
<div class="fruits" data-to="dog">banana</div>

jQuery:

$(".fruits").text(function(i){
  return $(this).data().to;     // or use: // this.dataset.to;
});

jsBin demo

Community · Accepted Answer · 2017-05-23 11:50:41Z

3

Roko provided an answer in jQuery, with that out of the way..

There is no need to use jQuery for such a simple task, here is one in plain JavaScript. (fiddle)

var pets = [ "cat", "dog","fish" ];
var fruits = document.querySelectorAll(".fruits"); // Partial support in IE8
for( var i = 0 ; i < fruits.length ; i ++ )
    fruits[i].innerHTML = pets[i];

Here is an even faster version by @Roko.

var pets = [ "cat", "dog", "fish" ],
    fruits = document.getElementsByClassName("fruits"), // Not supported in IE8
    tot = fruits.length,
    i = 0;
for(;i<tot;) fruits[i].innerHTML = pets[i++];

Benchmark jQuery vs JavaScript vs Roko's JavaScript

Hope it helps!

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Jan 23, 2015 at 0:47

undefined

4,1757 gold badges29 silver badges38 bronze badges

12 Comments

Roko C. Buljan Over a year ago

Well, jQuery is JavaScript, and inside the Sizzle function selector it already uses the JS's (guess what!) querySelectorAll to create a collection of Elements objects and all it takes is $(".fruits")

undefined Over a year ago

I never said jQuery wans't javascript, I said my answer is in plain javascript (no libraries), I also pointed out that you gave an answer in jQuery, so that my answer only counts as an addition or another solution to the problem. I believe my answer is more efficient, while being somewhat more tedious to write :)

Roko C. Buljan Over a year ago

JS will be always faster than jQ, agreed with that, but jQ will help you move with your project and don't care about IE8's partial support of querySelector / querySelectorAll

undefined Over a year ago

No doubt! jQuery serves as a great polyfill, but it's overused in my opinion, that's why I provided a jQuery-free solution :)

Roko C. Buljan Over a year ago

here, I've create a JS version that runs double faster than yours: jsperf.com/jquery-selector-vs-javascript/2 (since you're interested in JS versions ;) ) Might be useful! Cheers

|

Mic · Accepted Answer · 2015-01-23 00:50:27Z

1

Using .each would look something like this. I've set it to toggle back and forth using an array to hold the other collection. However, Roko C. Buljan's answer accomplishes essentially the same thing with less effort by avoiding some unnecessary method calls, so I would definitely say his is the better answer.

var otherVals = ['dog', 'cat', 'fish'];

function go() {
  $('.fruits').each(function(index) {
    var temp = $(this).html();
    $(this).html(otherVals[index]);
    otherVals[index] = temp;
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="fruits">apple</div>
  <div class="fruits">banana</div>
  <div class="fruits">strawberry</div>
</div>
<input type="button" value="go" onclick="go()" />

answered Jan 23, 2015 at 0:50

Mic

4,0721 gold badge16 silver badges17 bronze badges

2 Comments

Roko C. Buljan Over a year ago

$('.fruits') is already a collection of elements. No need to .each() to modify the .text() or .html()

Mic Over a year ago

Your way is more concise. I'll add a note about it.

Collectives™ on Stack Overflow

Change div content dynamically with jQuery

3 Answers 3

JavaScript

jQuery

Comments

12 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

JavaScript

jQuery

Comments

12 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related