CODEWITHSUNDEEP
javascripthtml
Hackolic
Hackolic

Reputation: 74

How to change data in span of div?

I have to change data of a span inside a div.
The class for all spans is the same, as is the class for all divs.

I have tried looping through the testimonials, but it doesn't do what I want. I need to find a better way rather than looping, as it can be done in a line also and I can replace data of all the span at once using JavaScript only.

var testimonials = document.querySelectorAll('.step_input');
Array.prototype.forEach.call(testimonials, function(elements, index) {
  console.log(elements);
});
<div class="step_input" contenteditable="true">
  The class of div is same
  <span class="ing-tag_0"> The data to be changed </span>
  <span class="ing-tag_1"> The data not to be changed </span>
</div>
<div class="step_input" contenteditable="true">
  This one has same class of span
  <span class="ing-tag_0"> The data to be changed </span> only
  <span class="ing-tag_0"> The data to be changed </span>
</div>
<div class="step_input" contenteditable="true">
  <span class="ing-tag_0"> qweq </span>
</div>

Upvotes: 2

Views: 57

Answers (3)

Lucky
Lucky

Reputation: 575

You can user following code

var testimonials = document.querySelectorAll('.step_input > .ing-tag_0');
Array.prototype.forEach.call(testimonials, function(elements, index) {
     elements.innerHTML = 'new text'; 
});
<div  class="step_input" contenteditable="true">The class of div is same <span class="ing-tag_0"  > The data to be changed </span>
<span class="ing-tag_1"  > The data not to be changed </span>
</div>
<div  class="step_input" contenteditable="true">This one has same class of span<span class="ing-tag_0"  > The data to be changed </span> only<span class="ing-tag_0"  > The data to be changed </span>
</div>
<div  class="step_input" contenteditable="true"><span class="ing-tag_0"  > qweq </span></div>

Upvotes: 2

blurfus
blurfus

Reputation: 14031

You could modify your selector to be .step_input > .ing-tag_0. As in:

var testimonials = document.querySelectorAll('.step_input > .ing-tag_0');

testimonials.forEach(function(spanElem, index) {
   spanElem.innerHTML = 'spanElem' + index; 
});

UPDATED to reflect new code in OP's question

See demo below:

var testimonials = document.querySelectorAll('.step_input > .ing-tag_0');

testimonials.forEach(function(spanElem, index) {
     spanElem.innerHTML = 'spanElem' + index; 
});
<div class="step_input" contenteditable="true">
  The class of div is same
  <span class="ing-tag_0"> The data to be changed </span>
  <span class="ing-tag_1"> The data not to be changed </span>
</div>
<div class="step_input" contenteditable="true">
  This one has same class of span
  <span class="ing-tag_0"> The data to be changed </span> only
  <span class="ing-tag_0"> The data to be changed </span>
</div>
<div class="step_input" contenteditable="true">
  <span class="ing-tag_0"> qweq </span>
</div>

Upvotes: 0

Ludovic Guillaume
Ludovic Guillaume

Reputation: 3287

document
  .querySelectorAll('.step_input > .ing-tag_0')
  .forEach(e => e.innerHTML = 'REPLACED');
<div class="step_input" contenteditable="true">
  The class of div is same
  <span class="ing-tag_0"> The data to be changed </span>
  <span class="ing-tag_1"> The data not to be changed </span>
</div>
<div class="step_input" contenteditable="true">
  This one has same class of span
  <span class="ing-tag_0"> The data to be changed </span> only
  <span class="ing-tag_0"> The data to be changed </span>
</div>
<div class="step_input" contenteditable="true">
  <span class="ing-tag_0"> qweq </span>
</div>

NOTE: querySelectorAll already returns an Array.

NOTE²: This will replace the direct childs with .ing-tag_0 class. If this class can be wrapped in another element and should be replace too, just remove the > in the selector.

Upvotes: 2

Related Questions