Dynamically constructed input using MDL does not display correctly

Question

I have the following code,

var loginForm = document.createElement('div'); loginForm.className = 'row'; loginForm.innerHTML = '<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label textfield-demo"><input class="mdl-textfield__input" type="text" id="login" /><label class="mdl-textfield__label" for="login">Username</label></div>'; document.getElementById('page-content').appendChild(loginForm); 

The problem is that since javascript functions are already running, the input is not configured correctly.

Anyone what javascript function I need to call to make this work? I tried MaterialTextfield.prototype.init() , but nothing has changed.

Answer 1

You can use the function of the MDL update item. Since you created the loginForm dynamic mode, you can update it in the scope using

  componentHandler.upgradeElement(loginForm); //or, componentHandler.upgradeDom(loginForm); //however, I suggest using jQuery to upgrade multiple if you are adding more than one componentHandler.upgradeElements($('.mdl-textfield').get()); 

This will get all the mdl-textfield objects and update them (if not updated earlier)

Answer 2

I kept digging the source code and found componentHandler.upgradeDom() . When performing this function, all dynamic elements are fixed.