How To Get The Html Content Of Multiple Div

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

This is content I

This is content J&l

Solution 1:

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)

Solution 2:

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.

Solution 3:

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

Share