18

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>
Kuf
  • 17,318
  • 6
  • 67
  • 91
suannai
  • 552
  • 1
  • 4
  • 17

8 Answers8

34

Try this

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

for(i=0;i<spans.length;i++)
{
  alert(spans[i].innerHTML);
}
yogi
  • 19,175
  • 13
  • 62
  • 92
12
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.

Florian Margaine
  • 58,730
  • 15
  • 91
  • 116
7

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

Elias Van Ootegem
  • 74,482
  • 9
  • 111
  • 149
2
<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>

​

Mihai Iorga
  • 39,330
  • 16
  • 106
  • 107
1

Pure javascript would be like this

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

If you are using jQuery it would be like this

$("#test").children()
pkurek
  • 606
  • 4
  • 13
  • `childNodes` is different than `children`. – Florian Margaine Aug 21 '12 at 09:36
  • sorry my bad should be `document.getElementById('test').children` as I want the property of an Elemnt not a Node property. – pkurek Aug 21 '12 at 09:46
  • It's not about properties :) Using `childNodes` will get you the nodes in it, so the textnodes, the comments, etc. Using `children`, you only get the *element* children. Edit your answer to correct this :-) – Florian Margaine Aug 21 '12 at 09:49
  • Yeah it's true, but I was thinking about the difference between children and childNodes (and why you will get all the text and comments :) . Check out [here](http://stackoverflow.com/questions/7935689/what-is-the-difference-between-children-and-childnodes-in-javascript) – pkurek Aug 21 '12 at 09:53
1

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>
Vlad Bezden
  • 83,883
  • 25
  • 248
  • 179
0

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.

Vishal Thakur
  • 1,564
  • 16
  • 25
0
var test = document.getElementById( 'test' ).innerHTML;

It will work better

Muhammed Sibly B
  • 71
  • 1
  • 6