Getting text in nested html tag using jquery

Question

I am trying to print the first ten entries of a website which has a list, and I want the result in the console itself. Here's the structure of the HTML it's using

<div class=classname>
  <b>The text i want</b>
</div>

here's what i tried running in the console:

list = document.getElementsByClassName('classname')
for(var i=0;i<10;i++)
{
  console.log (list[i])
}

I am at a loss of what to do next. I'm fairly new to javascript so any help would be greatly appreciated.

Try console.log (list[i].textContent)

Walk
– Walk

2017-10-12 06:18:51 +00:00
Commented Oct 12, 2017 at 6:18 — Walk
– Walk, Commented Oct 12, 2017 at 6:18

Nisarg Shah · Accepted Answer · 2017-10-12 06:18:46Z

1

You can use the innerText property to get the text.

Also, use list.length based comparison for running the for loop instead of arbitrary numbers such as 10 : for(var i=0;i<10;i++).

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

<div class="classname">
  <b>The text i want</b>
</div>

Keep in mind that unlike textConten, innerText will not display any text that is not visible on screen, or text inside <script> tags. See this for more info on the differences.

answered Oct 12, 2017 at 6:18

Nisarg Shah

14.6k6 gold badges38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Carsten Løvbo Andersen · Accepted Answer · 2017-10-12 06:19:05Z

0

Use textContent or innerText to get the text you want. list[i].textContent

You can also use .innerHTML this will also show you tags.

Demo

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

<div class=classname>
  <b>The text i want</b>
</div>

answered Oct 12, 2017 at 6:19

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Comments

Mohit Bhardwaj · Accepted Answer · 2017-10-12 06:20:17Z

0

First thing is you need to use textContent to get the text content inside the selected element node.

Also to make it simpler to target nested elements in JavaScript, you can use these functions:

querySelectorAll

querySelector

var myTags = document.querySelectorAll(".classname b");

for( var i = 0; i < myTags.length; i++ ){
  var curTag = myTags[i];
  console.log( curTag.textContent );
}

<div class=classname>
  <b>The text i want</b>
</div>

<div class=classname>
  <b>The text i want (2nd time)</b>
</div>

<div class=classname>
  <b>The text i want (3rd time)</b>
</div>

answered Oct 12, 2017 at 6:20

Mohit Bhardwaj

10.1k7 gold badges41 silver badges66 bronze badges

Comments

Taufik Nur Rahmanda · Accepted Answer · 2017-10-12 06:56:11Z

with jQuery, it's simple:

$('.classname').each(function(i,e) {
    if (i==10) return false;
    console.log($(e).text());
});

$('.classname').each(function(i,e) {
    if (i==10) return false;
    console.log($(e).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=classname>
  <b>The text i want 1</b>
</div>
<div class=classname>
  <b>The text i want 2</b>
</div>
<div class=classname>
  <b>The text i want 3</b>
</div>
<div class=classname>
  <b>The text i want 4</b>
</div>
<div class=classname>
  <b>The text i want 5</b>
</div>
<div class=classname>
  <b>The text i want 6</b>
</div>
<div class=classname>
  <b>The text i want 7</b>
</div>
<div class=classname>
  <b>The text i want 8</b>
</div>
<div class=classname>
  <b>The text i want 9</b>
</div>
<div class=classname>
  <b>The text i want 10</b>
</div>
<div class=classname>
  <b>The text i want 11</b>
</div>
<div class=classname>
  <b>The text i want 12</b>
</div>

Collectives™ on Stack Overflow

Getting text in nested html tag using jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related