CODEWITHSUNDEEP
javascripthtml
akshay
akshay

Reputation: 395

reading all spans of a div dynamically

I have a div inside which i have number of spans. Now i want to read all text of all spans along with thrir id and populate it into a javascript map where key = spanid and value =" text of span.How can i do it?

Eg <div mydiv="xyx" >   
     <span id ="sp1" > M/span>
     <span id ="sp2" > M/span>
     .... 
      ..

   </div>

How can i populate the map?

Upvotes: 11

Views: 25353

Answers (3)

Yi Jiang
Yi Jiang

Reputation: 50115

You can get the elements using document.getElementById and document.getElementsByTagName, then iterate through them and add them to the object. Use textContent and innerText to obtain the text of the span element, and insert them into the object like so: 

var spans = document.getElementById('xyx').getElementsByTagName('span'), 
    obj = {};

for(var i = 0, l = spans.length; i < l; i++){
    obj[spans[i].id] = spans[i].textContent || spans[i].innerText;
}

See it working here: http://www.jsfiddle.net/SJs4h/

Upvotes: 16

WEBProject
WEBProject

Reputation: 1345

Using Jquery its very simple:

var spans = $('#xyx').find('span');
var arr = new Array();
 foreach(spans as span)
 {
       arr[$(span).attr('id')] = $(span).text;
 }

Hope i helped.

Update: None jquery way:

var spans = document.getElementById('xyx');
spans = spans.getElementsByTagName('span');
var arr = new Array();
foreach(spans as span) 
{
   arr[span.getAttribute('id')] = arr[span.innerHTML];
}

Upvotes: -1

derekcohen
derekcohen

Reputation: 1514

var container=document.getElementById('xyx');
var spanArray=container.getElementsByTagName('span');
for(var s=0;s<spanArray.length;s++){
  spanText=spanArray[s].innerHTML;
}

Upvotes: 3

Related Questions