Get Inner Text from DIV

Question

HTML:

<div id="country">
    <span>B</span>
    Bangladesh
</div>

<div id="capital">
    Dhaka
    <span>D</span>
</div>

From #country, I want to get Bangladesh
From #capital, I want to get Dhaka

How can I achieve this?

Thisis for replacing the text - but the process of getting it is included in the answers: http://stackoverflow.com/questions/11867269/replace-only-text-inside-a-div-using-jquery — Jamiec, May 18 '16 at 12:17

DenseCrab · Accepted Answer · 2016-05-18T12:28:39.630

12

Try if this works

$('#country').clone().children().remove().end().text();
$('#capital').clone().children().remove().end().text();

.clone() clones the selected element.

.children() selects the children from the cloned element

.remove() removes the previously selected children

.end() selects the selected element again

.text() gets the text from the element without children

edited May 18 '16 at 12:28

answered May 18 '16 at 12:22

DenseCrab

1,273
11
22

1

This will return all the text content that are before and after the `span` element. – John R May 18 '16 at 12:32

score 3 · Answer 2 · answered May 18 '16 at 12:19

3

Can't you just edit the HTML ?

<div id="country">
    <span>B</span>
    <span class="text">Bangladesh</span>
</div>
<div id="capital">
    <span class="text">Dhaka</span>
    <span>D</span>
</div>

Then, using jQuery :

var one = $("#country>.text").text();
var two = $("#capital>.text").text();

answered May 18 '16 at 12:19

Rosh Donniet

418
2
10

Yo! Worked like a charm. Thanks a lot Pro. – Lalarukh khan Apr 10 '23 at 19:54

Pawan Nogariya · Answer 3 · 2016-05-18T12:45:14.640

2

Similar to Andy's answer, but this will remove all the elements so you do not have to do per child element removal, so no matter how many children or what structure is inside your div, it will always return the text

var clone = $('div#country').clone();
clone.find('*').remove();
console.log(clone.text());

Fiddle

edited May 18 '16 at 12:45

answered May 18 '16 at 12:39

Pawan Nogariya

8,330
12
52
105

1

This is a nice upgrade to my answer. – Andy Donegan May 18 '16 at 12:56

Jamiec · Answer 4 · 2016-05-18T12:25:51.277

1

You can filter the contents for text nodes (nodetype=3) and read the textContent:

var country = $('#country').contents().filter(function() {
    return this.nodeType == 3
})[1].textContent;

edited May 18 '16 at 12:25

answered May 18 '16 at 12:20

Jamiec

133,658
13
134
193

score 1 · Answer 5 · answered May 18 '16 at 12:25

1

You can get that text by using nextSibling and previousSiblingattribute.

Example:

$("#country").find("span")[0].nextSibling.nodeValue;
$("#capital").find("span")[0].previousSibling.nodeValue;

Fiddle Demo

answered May 18 '16 at 12:25

John R

2,741
2
13
32

score 1 · Answer 6 · edited May 23 '17 at 12:22

answer = $('#capital').clone();
answer.children('span').remove();
alert(answer.text()); // alerts "text"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="country">
  <span>B</span>
  Bangladesh
</div>

<div id="capital">
  Dhaka
  <span>D</span>
</div>

Plenty of answers already.

You can use .clone() for that, like so:

answer = $('#capital').clone();
answer.children('span').remove();
alert(answer.text()); // alerts "text"

Using this format you can add other elements to your div and hopefully the code above is simple enough to be able to see how to remove them.

Original answer from : get text in div

Get Inner Text from DIV

6 Answers6

Linked