使用 Javascript 以编程方式创建 MDL 开关答案

【问题标题】：Create MDL Switch Programmatically with Javascript使用 Javascript 以编程方式创建 MDL 开关
【发布时间】：2018-12-22 23:16:12
【问题描述】：

我有一个关于 MDL 的小问题，我想不通。

仅使用 HTML 就可以完美运行：

<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
    <input onchange="handleDisableEnabled(this)" type="checkbox" id="switch-1"
           class="mdl-switch__input" checked>
    </label>
<span class="mdl-switch__label"></span>

但是当我做这样的事情时：

<span id='foo'></span>

<script>
document.getElementById("foo").innerHTML = '<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input onchange="handleDisableEnabled(this)" type="checkbox" id="switch-1" class="mdl-switch__input" checked></label>
<span class="mdl-switch__label"></span>';
</script>

它只是输出一个没有格式的普通复选框。有没有办法通过Javascript创建开关？谢谢！

【问题讨论】：

标签： javascript html material-design material-design-lite

【解决方案1】：

您需要调用componentHandler.upgradeElement(elementName) 来实例化一个动态创建的MDL 组件。有关详细信息，请参阅How the Component Handler works。例如：

let fragment = document.createDocumentFragment();
let label = document.createElement('label');
let input = document.createElement('input');
let span = document.createElement('span');
span.textContent = 'Switch';

Object.assign(label, {className: 'mdl-switch mdl-js-switch mdl-js-ripple-effect'});
label.setAttribute('for', 'switch-1');
Object.assign(input, {type: 'checkbox', className: 'mdl-switch__input', id: 'switch-1'});
Object.assign(span, {className: 'mdl-switch__label'});

fragment.appendChild(label);
label.appendChild(input);
label.appendChild(span);

componentHandler.upgradeElement(label);
document.querySelector('#container').appendChild(fragment);

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Design Lite Switch</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  </head>

  <body>

    <div id="container"></div>

    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    
  </body>

</html>

【讨论】：