How to Edit the text of a MDL Button with JQuery

Question

I am currently working on a project which uses MDL Lite and is basically a controller for a device I am building. The webpage has buttons, all defined as standard MDL Buttons with Ripple.

I need to make the button's text change when something happens. The problem is, however, when every is use JQuery to change the html of the button (specifically the text displayed), the ripple effect vanishes.

After some research I found this. The solution does work but I have exactly 29 buttons, and downgrading then upgrading them each causes a lot of lag.

Is there any other way to fix this problem which doesn't cause lag?

Answer 1

After looking at the real-time HTML updates in Chrome, I noticed the mdl-buttom only adds a span for the ripple effect, with the text right before it.

A simple fast workaround is change the button's text by modifying the html before the child element.