MDLにフォーム要素を動的に追加する

Question

テキスト入力要素をフォームに動的に追加したいと考えています。私はcss3フレームワークのためにmdlを使用しています。 Iこのフォームに新しいelemntアドイン午前：私はそれをしようとすると、新しいテキスト入力のCSSプロパティではありません

var x = '<div class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield mdl-cell--6-col" style="margin:2px;" >' 
     +' <input class="mdl-textfield__input" type="text" name="participant[]" required />' 
     +' <label class="mdl-textfield__label">Participant 2</label>' 
    +'</div>'; 
$('#enter-participant-details-div').append(x); 

：

<form> 
    <div id="enter-participant-details-div"> 
    <div id="1" class="mdl-textfield mdl-textfield--floating-label mdl-js-textfield mdl-cell--6-col"> 
     <input class="mdl-textfield__input" type="text" name="participant[]" required /> 
     <label class="mdl-textfield__label">Participant 1</label> 
    </div> 
    </div> 
</form> 

私が使用して新しいテキスト要素を追加変化。

チェック=>https://jsfiddle.net/mr4pswaq/2/

私はそれが最初のテキスト入力要素のように見えるようにすればいいの？

Answer 1

動的に作成された要素については、手動でアップグレードする必要があります。

ただ、次の行を追加します。私はすべての時間を無駄に約5時間のためにそれを修正しようとしていた

componentHandler.upgradeDom();