CODEWITHSUNDEEP
javascriptjqueryhtml
Alberto
Alberto

Reputation: 78

Get all innerhtml contents of span tags

I am trying to get the content of all span tags that are children of div#parent and I am not able to do it, I just get the first one. Could someone help me, please!

$( document ).ready(function() {
    var allspans=$("#parent").find("span").html();
    console.log( allspans );
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>jQuery</title>
</head>
<body>
  <div id="parent">
    <span>Element_1</span>
    <span>Element_2</span>
    <span>Element_3</span>
    <span>Element_4</span>
    <span>Element_5</span>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  </div>
</body>
</html>

Thank you! Best Regards!

Upvotes: 2

Views: 2904

Answers (7)

Eugene Zakharenko
Eugene Zakharenko

Reputation: 147

JQuery is slow and unnecessary for that.

spans = document.getElementById("parent").getElementsByTagName("span");

returns an array of all spans in parent.

At this point the task is complete, as I could understand it: spans[span_number].innerHTML is what you want.

Then just parse that spans array in any way (foreach or whatever you like):

for(var i = 0, len = spans.length; i < len; i++ )
{
    console.log(spans[i].innerHTML);
}

Avoid JQuery in any means (when possible) to make your code more independent, fast, less resource-intensive and robust. Save traffic.

Upvotes: 1

Gaurav Rao
Gaurav Rao

Reputation: 117

Try this

var arraySpan = [];
$('span').each(function() {
   arraySpan.push(this.innerHTML);
});

Upvotes: 0

korwalskiy
korwalskiy

Reputation: 967

You would need to loop through each span matched by the selector and console log each html value or concatenate them into a variable or push them to an array variable; depending on whatever works best.

Do something like:

$( document ).ready(function() {
    $("#parent").find("span").each(function(){
     console.log( $(this).html() );
    });
});

to log the html value of each span.

Upvotes: 0

Durga
Durga

Reputation: 15604

$( document ).ready(function() {
    var allspans=$("#parent").find("span");
    var allSpanHtml = '';
    allspans.each(function() {
     allSpanHtml += $(this).html();
    });
    console.log( allSpanHtml );
});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="parent">
    <span>Element_1</span>
    <span>Element_2</span>
    <span>Element_3</span>
    <span>Element_4</span>
    <span>Element_5</span>
</div>

You can use .each() to iterate through an array of element, and then use .html() to get text from individual element.

Upvotes: 0

Nisarg Shah
Nisarg Shah

Reputation: 14531

You can iterate over the span's using .each, and then access their individual innerHTML's like this. Through the .each you can then combine the inner HTML content in an array or string.

Or, you could get the inner text of all span's by $("#parent").text().

$(document).ready(function() {
  $("#parent").find("span").each(function() {
    console.log($(this).html());
  });
  
  console.log($("#parent").text());
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>jQuery</title>
</head>

<body>
  <div id="parent">
    <span>Element_1</span>
    <span>Element_2</span>
    <span>Element_3</span>
    <span>Element_4</span>
    <span>Element_5</span>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  </div>
</body>

</html>

Upvotes: 1

Haitham Adnan Mubarak
Haitham Adnan Mubarak

Reputation: 293

You need to use some loop until $("#parent").find("span").length, by default jquery html function will returns the first matched element content:

var html = '';
var allspans = $("#parent").find("span");
for(var i=0;i<allspans.length;i++){
  html += allspans[i].innerHTML;
}

Upvotes: 0

prasanth
prasanth

Reputation: 22490

Try with map() and get() function .You will get the all the span tag innerHTML with in array

$( document ).ready(function() {
    var allspans=$("#parent").find("span").map(function(){
    return $(this).html();
    }).get()
    console.log( allspans );
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>jQuery</title>
</head>
<body>
  <div id="parent">
    <span>Element_1</span>
    <span>Element_2</span>
    <span>Element_3</span>
    <span>Element_4</span>
    <span>Element_5</span>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  </div>
</body>
</html>

Upvotes: 0

Related Questions