javascriptを使用してmdlテキストフィールドコンポーネントを追加すると異常な動作が発生する

Question

javascriptで作成されたテキストフィールドは、浮動テキストを作成できません。is-upgradedクラスはありません。正しく実装するには？

例コード：

var div_name = document.createElement("div"); 
 
div_name.setAttribute("class", "mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet"); 
 
console.log("Masuk"); 
 
componentHandler.upgradeElement(div_name); 
 
console.log("Masuk1"); 
 
var p_element = document.getElementsByClassName("container")[0].appendChild(div_name); 
 

 
var l_name = document.createElement("label"); 
 
var t = document.createTextNode("Name:"); 
 
l_name.setAttribute("class", "mdl-textfield__label"); 
 
l_name.setAttribute("for", "name"); 
 
l_name.appendChild(t); 
 
componentHandler.upgradeElement(l_name); 
 
p_element.appendChild(l_name); 
 

 
var i_name = document.createElement("input"); 
 
var t = document.createTextNode(""); 
 
i_name.setAttribute("id", "name"); 
 
i_name.setAttribute("class", "mdl-textfield__input"); 
 
i_name.setAttribute("name", "name"); 
 
i_name.setAttribute("type", "text"); 
 
i_name.setAttribute("autocomplete", "off"); 
 
i_name.appendChild(t); 
 
componentHandler.upgradeElement(i_name); 
 
p_element.appendChild(i_name);

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.light_blue-blue.min.css"> 
 
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
 
<div class="container"> 
 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet"> 
 
    <label for="email" class="mdl-textfield__label">Email:</label> 
 
    <input id="email" name="email" autocomplete="off" class="mdl-textfield__input" type="text"> 
 
    </div> 
 
</div>

ありがとうございました。

Answer 1

完全構造が準備され、ドキュメントに添付されるまでコンポーネントをアップグレードする必要はありません。

固定と注釈付きバージョンは次のとおりです。

var div_name = document.createElement("div"); 
 
div_name.setAttribute("class", "mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet"); 
 
console.log("Masuk"); 
 
// Do not upgrade before the complete component is ready 
 
console.log("Masuk1"); 
 
var p_element = document.getElementsByClassName("container")[0].appendChild(div_name); 
 

 
var l_name = document.createElement("label"); 
 
var t = document.createTextNode("Name:"); 
 
l_name.setAttribute("class", "mdl-textfield__label"); 
 
l_name.setAttribute("for", "name"); 
 
l_name.appendChild(t); 
 
// Do not upgrade before the complete component is ready 
 
p_element.appendChild(l_name); 
 

 
var i_name = document.createElement("input"); 
 
var t = document.createTextNode(""); 
 
i_name.setAttribute("id", "name"); 
 
i_name.setAttribute("class", "mdl-textfield__input"); 
 
i_name.setAttribute("name", "name"); 
 
i_name.setAttribute("type", "text"); 
 
i_name.setAttribute("autocomplete", "off"); 
 
i_name.appendChild(t); 
 
p_element.appendChild(i_name); 
 

 
// Update the item with the `mdl-js` identifier *after* it is attached to the DOM. 
 
componentHandler.upgradeElement(div_name);

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.light_blue-blue.min.css"><script src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
 
<div class="container"> 
 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet"> 
 
    <label for="email" class="mdl-textfield__label">Email:</label> 
 
    <input id="email" name="email" autocomplete="off" class="mdl-textfield__input" type="text"> 
 
    </div> 
 
</div>