如何获取嵌套跨度HTML元素的文本？

Question

I want to get text from Nested SPAN element in Following HTML code:

<span id='result_box'>
<span class="hps">text_content</span>
</span>

I want to get "text_content" value using JavaScript.

I have tried this but have a problem:

var resBox=document.getElementById('result_box');
var strTrans=resBox.getElementsByTagName('span')[0].innerHTML;
alert(strTrans);

EDIT: Actually i want to do this from Online Page

Answer 1

your code works fine. i guess your problem is you are executing these code when DOM not loaded completely.if you are testing something, you can try this.

window.onload = function () {
   //put your code here,it will alert when page loaded completely.
}; 

or put the script after your span element. like this.

<span id='result_box'>
  <span class="hps">text_content</span>
</span>
<script type='text/javascript'>
   var resBox=document.getElementById('result_box');
   var strTrans=resBox.getElementsByTagName('span')[0].innerHTML;
   alert(strTrans);// it will alert
</script>

Answer 2

you get the element by classname.. document.getElementsByClassName() and then grabbing the first item off the resulting node list

window.onload = function () {
   document.getElementsByClassName("hps")[0].innerHTML
};     

jsfiddle

Answer 3

var resBox=document.getElementById('result_box');
var strTrans=document.getElementsByTagName('span')[0].innerText;
alert(strTrans);​

or better

strTrans = document.querySelector(".hps").innerText ;

Answer 4

got you, i guess you embed a link in your html page,then you wanna manipulate DOM in the page you embed,right? if so, you can check browser same origin policy.

if you wanna implement online translation via google, you can google 'google translate api', google provides a api to others for implementing online translation in their own applications.

it seems like bing also provides a api.i'm not sure.