0

I have below div tag from material UI which is getting autogenerated through MUI -

<div class="MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault">Some Text</div>

Through javascript , I am fetching this element as -

var ele=document.getElementsByClassName("MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault");
console.log(ele);

In console log I am able to see element with all its properties including innerHTML as Some Text

When I am trying to change the InnerHTML by -

ele[0].innerHTML="Changed Text" , I am not able to see that text got changed.

Also , before this , when I try to log innerHTML -

console.log(ele[0].innerHTML) , I am getting blank result.

How can I change the inner HTML from HTML Collection I am fetching ?

C Sharper
  • 8,284
  • 26
  • 88
  • 151
  • Typo. should be [getElementsByClassName](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName). Also you should then iterate them like in the duplicate question. – Roko C. Buljan Jul 14 '22 at 06:02

1 Answers1

1

You have missed two things:

  1. Typo in getElementsByClassName -> should be getElementByClassName

  2. If you put spaces in your class name inside getElementsByClassName like MuiAvatar-root MuiAvatar-circular, its not correct.

var ele = document.getElementsByClassName("MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault");

ele[0].innerHTML = "TEST"
<div class="MuiAvatar-root.MuiAvatar-circular.MuiAvatar-colorDefault">Some Text</div>
subodhkalika
  • 1,964
  • 1
  • 9
  • 15
  • I am getting ele as HTML collection with one element within. But ele[0] as undefined . Even I replaced space with dots – C Sharper Jul 14 '22 at 06:05
  • Can you try `[].forEach.call(ele, function (el) { console.log(el)});` and let me know what do you get – subodhkalika Jul 14 '22 at 06:10