CODEWITHSUNDEEP
javascript
suannai
suannai

Reputation: 562

How to get < span > value？

There are a piece of code,but can not use <id> tag.

So,how do I get to the <span> 1 2 3 4?

<div id="test">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
<div>

Upvotes: 19

Views: 167933

Answers (8)

Muhammed Sibly B
Muhammed Sibly B

Reputation: 111

var test = document.getElementById( 'test' ).innerHTML;

It will work better

Upvotes: 0

Vishal Thakur
Vishal Thakur

Reputation: 1696

You need to change your code as below:-

<html>
<body>

<span id="span_Id">Click the button to display the content.</span>

<button onclick="displayDate()">Click Me</button>

<script>
function displayDate() {
   var span_Text = document.getElementById("span_Id").innerText;
   alert (span_Text);
}
</script>
</body>
</html>

After doing this you will get the tag value in alert.

Upvotes: 0

Vlad Bezden
Vlad Bezden

Reputation: 89507

You can use querySelectorAll to get all span elements and then use new ES2015 (ES6) spread operator convert StaticNodeList that querySelectorAll returns to array of spans, and then use map operator to get list of items.

See example bellow

([...document.querySelectorAll('#test span')]).map(x => console.log(x.innerHTML))
<div id="test">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
<div>

Upvotes: 1

pkurek
pkurek

Reputation: 606

Pure javascript would be like this

var children = document.getElementById('test').children;

If you are using jQuery it would be like this

$("#test").children()

Upvotes: 1

Florian Margaine
Florian Margaine

Reputation: 60717

var test = document.getElementById( 'test' );

// To get the text only, you can use "textContent"
console.log( test.textContent ); // "1 2 3 4"

textContent is the standard way. innerText is the property to use for legacy IE. If you want something as cross browser as possible, recursively use nodeValue.

Upvotes: 12

Mihai Iorga
Mihai Iorga

Reputation: 39704

<div id="test">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>
<div id="test2"></div>

<script type="text/javascript">
    var getDiv = document.getElementById('test');
    var getSpan = getDiv.getElementsByTagName('span');​​​
    var divDump = document.getElementById('test2');

    for (var i=0; i<getSpan.length; i++) {
        divDump.innerHTML = divDump.innerHTML + ' ' + getSpan[i].innerHTML;
    }
</script>

​

Upvotes: 2

Elias Van Ootegem
Elias Van Ootegem

Reputation: 76395

No jQuery tag, so I'm assuming pure JavaScript

var spanText = document.getElementById('targetSpanId').innerText;

Is what you need

But in your case:

var spans = document.getElementById('test').getElementsByTagName('span');//returns node-list of spans
for (var i=0;i<spans.length;i++)
{
    console.log(spans[i].innerText);//logs 1 for i === 0, 2 for i === 1 etc
}

Here's a fiddle

Upvotes: 7

yogi
yogi

Reputation: 19591

Try this

var div = document.getElementById("test");
var spans = div.getElementsByTagName("span");

for(i=0;i<spans.length;i++)
{
  alert(spans[i].innerHTML);
}

Upvotes: 36

Related Questions