How to get the Html content of multiple div

Question

Please I want to get the HTML contents of many div with the same id this is my code:

<div id="my_div">This is content I</div>
<div id="my_div">This is content J</div>
<div id="my_div">This is content P</div>
<div id="my_div">This is content Z</div>

And this is my jQuery code:

document.getElementById('my_div').innerHTML;

But it only gives me the contents of one div. eg This is content I. This is what I really want This is content IThis is content JThis is content PThis is content Z. Please how do I run my code?

You can't give same id to multiple div. Id should be unique. Instead of id you can use class — Apb, May 04 '16 at 12:11
either use different id's for each div, or use a className or data-attr for this. — Harpreet Singh, May 04 '16 at 12:12
Bad markup. `The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).` — Gavin Thomas, May 04 '16 at 12:12
Also you will have to iterate trough all the `div` elements to get the specific values. — DCruz22, May 04 '16 at 12:16

Peter Smith · Answer 1 · 2016-05-04T12:21:14.643

Start with:

<div class="my_div">This is content I</div>
<div class="my_div">This is content J</div>
<div class="my_div">This is content P</div>
<div class="my_div">This is content Z</div>

Then use a jQuery .each on a selector of .my_div. See answer from Dhara Parmar

$(".my_div").each(function( index ) {
    console.log( index + ": " + $( this ).html() );
});

Will show you the results and then finally, concatenate in a loop.

score 1 · Accepted Answer · answered May 04 '16 at 12:17

add same class to all div: Try this:

<div class="my_div">This is content I</div>
<div class="my_div">This is content J</div>
<div class="my_div">This is content P</div>
<div class="my_div">This is content Z</div>

var str ="";
 $(".my_div").each(function() {
    str = str + $(this).html() + " ";
 })
 alert(str)

score 0 · Answer 3 · answered May 04 '16 at 12:21

Change your html to use class instead of id :

<div class="my_div">This is content I</div>
<div class="my_div">This is content J</div>
<div class="my_div">This is content P</div>
<div class="my_div">This is content Z</div>

And the loop through its values to get each one of them:

function showDivValues(){
    var length = document.getElementsByClassName('my_div').length;

    for(var i = 0; i < length; i++){
         console.log(document.getElementsByClassName('my_div')[i].innerHTML);
    }
}

How to get the Html content of multiple div

3 Answers3

Linked