'extract text inside <li> tag using java script or jquery

var array1[] ;

//i want to store text inside href in a array like this
// [cat,dog,cow,hen,elephant] , how can I do that?
<div class="ABCD"><h2 class="AB">Tags</h2>
<ul>
 <li><a href="/example">cat</a></li>
 <li><a href="/example2">dog</a></li>
 <li><a href="/example3">cow</a></li>
 <li><a href="/example4">hen</a></li>
 <li><a href="/example5">elephant</a></li>
</ul>
</div>

I want to get cat,dog,cow,hen,elephant to array animals[] using javascript.

how can I get them to a array? please help

javascripthtmljquerycss


Solution 1:[1]

Please refer below for the requirement you are looking for

let allLinks = document.querySelectorAll("div.ABCD  li > a")

let allLinksarray = Array.from(allLinks).map(linkElem => linkElem.innerHTML)

console.log(allLinksarray)
<div class="ABCD">
  <h2 class="AB">Tags</h2>
  <ul>
    <li><a href="/example">cat</a></li>
    <li><a href="/example2">dog</a></li>
    <li><a href="/example3">cow</a></li>
    <li><a href="/example4">hen</a></li>
    <li><a href="/example5">elephant</a></li>
  </ul>
</div>

Hope this helps.

Solution 2:[2]

var array = [];
var links = document.querySelectorAll('a');

links.forEach(link => array.push(link.text));

console.log(array);
<div class="ABCD"><h2 class="AB">Tags</h2>
<ul>
 <li><a href="/example">cat</a></li>
 <li><a href="/example2">dog</a></li>
 <li><a href="/example3">cow</a></li>
 <li><a href="/example4">hen</a></li>
 <li><a href="/example5">elephant</a></li>
</ul>
</div>

Solution 3:[3]

You can do something like that :

const lists = Array.from(document.querySelectorAll('li'));
let texts = lists.map(list => list.textContent);

console.log(texts);
<div class="ABCD"><h2 class="AB">Tags</h2>
<ul>
 <li><a href="/example">cat</a></li>
 <li><a href="/example2">dog</a></li>
 <li><a href="/example3">cow</a></li>
 <li><a href="/example4">hen</a></li>
 <li><a href="/example5">elephant</a></li>
</ul>
</div>

Solution 4:[4]

Using jQUERY

const li  = $('.ABCD').find('li > a');
const resultArray = Array.from(li).map(a => a.innerHTML)
console.log(resultArray);

Solution 5:[5]

var list = document.querySelectorAll('.ABCD a');
Array.prototype.map.call(list, function (i) {
  return i.innerText
});

you may refer to mdn for further information. https://developer.mozilla.org/en-US/docs/Web/API/NodeList#Example

Solution 6:[6]

Assuming you're a beginner (sorry if I'm judging incorrectly here), here's a detailed explanation at this: (link)

let list = document.getElementById('list').children // Add the ID 'list' to the ul element, and declare it here.
let myArray = [] // Empty array for the results to go too
for (let item in list) { // For every item in the list...
    if (list[item].children) { // Take the element with the index of 'item' from the list, and find it's children (a tag)
  myArray.push(list[item].children[0].innerHTML) // Add the innerHTML (text) to a new item on the array
  }
}

console.log(myArray) // Log the Array

There are plenty of other solutions here that would work too

Solution 7:[7]

Using jQuery

//variables
const items = [...$('.ABCD').find('li > a')];
const itemsText = [];

//get the list from html and puts on array
items.map(item => itemsText.push(item.text));

//console log with the text of your list
console.log(itemsText);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nithish
Solution 2 Talmacel Marian Silviu
Solution 3 Théo Benoit
Solution 4 sibabrat swain
Solution 5 taoxm310
Solution 6 NeuronButter
Solution 7

Related Questions