CODEWITHSUNDEEP
javascript
user4090029
user4090029

Reputation:

Get innerHTML after looping getElementsByClassName()

My example code:

<!DOCTYPE html>
<html>
<body>

<div class="names">
   <i>Name 1.</i>
</div>

<div class="names">
   <i>Name 2.</i>
</div>

<div class="names">
   <i>Name 3.</i>
</div>

<input type="button" value="Change all names" onclick="changeNames()" />
<script>
var changeNames = function() {
   var names = document.getElementsByClassName('names');

   for (var i = 0; i < names.length; i++) {
      names.item(i).textContent = names.item(i).textContent + ' Changed...'
   }
}
</script>
</body>
</html>

My question is : How to get <i> tag inside the class name?

names.item(i).textContent doesn't include <i> tag.

I've tried this but it's not working: names.item(i).find('i').textContent

And names.item(i) doesn't support .innerHTML, too.

Upvotes: 1

Views: 1566

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115222

Use Element.querySelector() to get i tag inside div.

var changeNames = function() {
  var names = document.getElementsByClassName('names');

  for (var i = 0; i < names.length; i++) {
    names.item(i).querySelector('i').textContent += ' Changed...'
      // or
      // names[i].querySelector('i').textContent += ' Changed...'
  }
}
<div class="names">
  <i>Name 1.</i>
</div>

<div class="names">
  <i>Name 2.</i>
</div>

<div class="names">
  <i>Name 3.</i>
</div>

<input type="button" value="Change all names" onclick="changeNames()" />

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

Because that is the html content so use innerHTML

var changeNames = function() {
  var names = document.getElementsByClassName('names');

  for (var i = 0; i < names.length; i++) {
    names[i].innerHTML += ' Changed...';
    //another approach is to add a text node than to modify the html content like
    //names[i].appendChild(document.createTextNode(' Changed...'))
  }
}
<div class="names">
  <i>Name 1.</i>
</div>

<div class="names">
  <i>Name 2.</i>
</div>

<div class="names">
  <i>Name 3.</i>
</div>

<input type="button" value="Change all names" onclick="changeNames()" />

Upvotes: 0

Related Questions