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>
This question is related to
javascript
<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>
?
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
}
Pure javascript would be like this
var children = document.getElementById('test').children;
If you are using jQuery it would be like this
$("#test").children()
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.
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
.
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))
_x000D_
<div id="test">_x000D_
<span>1</span>_x000D_
<span>2</span>_x000D_
<span>3</span>_x000D_
<span>4</span>_x000D_
<div>
_x000D_
Source: Stackoverflow.com