CODEWITHSUNDEEP
javascript
Paul
Paul

Reputation: 141

How can i get the span inner html values?

Here i need to get "<div class="set-title">Operations</div>" in main div have so many div is there all having same class name how can i get span values ?

<div id="page_x002e_data-form_x002e_task-edit_x0023_default-form-fields" class="form-fields">
<div class="set">
<div class="set-title">Operations</div>
<div class="alf-gb">
<div class="alf-u first">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Request date:</span>
<span class="viewmode-value" data-datatype="date">16 Jul, 2016</span>
</div>
</div>
</div>
<div class="alf-u">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Requestor company:</span>
<span class="viewmode-value" data-datatype="text">UST</span>
</div>
</div>
</div>
<div class="alf-u">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Requestor Name:</span>
<span class="viewmode-value" data-datatype="text">ewe</span>
</div>
</div>
</div>
</div>
<div class="alf-gb">
<div class="alf-u first">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Requestor Email:</span>
<span class="viewmode-value" data-datatype="text">ewe</span>
</div>
</div>
</div>
<div class="alf-u">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Training topic:</span>
<span class="viewmode-value" data-datatype="text">ewe</span>
</div>
</div>
</div>
<div class="alf-u">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Mode of Training:</span>
<span class="viewmode-value" data-datatype="text">ILT</span>
</div>
</div>
</div>
</div>
<div class="alf-gb">
<div class="alf-gb">
<div class="alf-gb">
</div>
<div class="set">
<div class="set-title">Operations Requirements</div>
<div class="alf-gb">
<div class="alf-u first">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Need to cover prerequisites:</span>
<span class="viewmode-value" data-datatype="text">w</span>
</div>
</div>
</div>
<div class="alf-u">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Desired outcomes for students:</span>
<span class="viewmode-value" data-datatype="text">w</span>
</div>
</div>
</div>
<div class="alf-u">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">ML POC:</span>
<span class="viewmode-value" data-datatype="text">1</span>
</div>
</div>
</div>
</div>
<div class="alf-gb">
<div class="alf-u first">
<div class="form-field">
<div class="viewmode-field">
<span class="viewmode-label">Training budget:</span>
<span class="viewmode-value" data-datatype="double">1</span>
</div>
</div>
</div>
<div class="alf-u">
<div class="alf-u">
</div>
<div class="alf-gb">
<div class="alf-gb">
</div>
<div class="set">
<div class="set-title">Trainer Details</div>
<div class="alf-gb">
<div class="alf-u first">
<div class="form-field">
<label for="page_x002e_data-form_x002e_task-edit_x0023_default_prop_mentoratraining_trainername">
Trainer Name:
<span class="mandatory-indicator">*</span>
</label>
<input id="page_x002e_data-form_x002e_task-edit_x0023_default_prop_mentoratraining_trainername" class="mandatory" type="text" maxlength="1024" value="" tabindex="0" name="prop_mentoratraining_trainername" title="The value cannot be empty." alf-validation-msg="The value cannot be empty.">
</div>
</div>

Please help me out ..

Upvotes: 1

Views: 117

Answers (3)

Amit Shah
Amit Shah

Reputation: 8179

if you are using jQuery which is very common these days:

jQuery("span").each(funtion(){
    var spanHtml = jQuery(this).html();
    // your code 
    // ....
});

Upvotes: 0

rejo
rejo

Reputation: 3350

Try this ,

window.onload = function() {
 console.log(document.querySelector('.viewmode-value').innerHTML);
};

OR

 window.onload = function() {
 console.log(document.getElementsByClassName("viewmode-value")[0].innerHTML);
 console.log(document.getElementsByClassName("viewmode-value")[1].innerHTML);

};

Upvotes: 1

gurvinder372
gurvinder372

Reputation: 68383

try this

var labels = document.querySelectorAll( ".viewmode-label" );
var values = document.querySelectorAll( ".viewmode-value" );

var map = {};
for( var counter = 0; counter < labels.length; counter++ )
{
  map[ labels[ counter ].innerHTML ] = values[ counter ].innerHTML
}

//now the map has all the labels against values
console.log( map[ "Request date:" ] );

Upvotes: 1

Related Questions