在MDL中动态添加表单元素

，可以通过以下步骤实现：

首先，MDL（Material Design Lite）是一种基于Google Material Design的前端框架，它提供了一套美观且易于使用的UI组件和样式。因此，在动态添加表单元素之前，需要确保已经引入了MDL框架。
动态添加表单元素可以通过JavaScript来实现。首先，需要获取要添加元素的父容器，可以使用document.getElementById()或其他选择器方法获取到父容器的DOM元素。
创建要添加的表单元素，可以使用document.createElement()方法创建一个新的DOM元素。根据需要添加的元素类型（如输入框、下拉列表等），创建相应的元素。
设置表单元素的属性和样式，可以使用元素的setAttribute()方法设置属性，例如设置输入框的类型、名称、样式等。
将创建的表单元素添加到父容器中，可以使用父容器的appendChild()方法将新创建的表单元素添加到父容器中。

下面是一个示例代码，演示如何在MDL中动态添加一个输入框：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
  <div id="formContainer" class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="inputField">
    <label class="mdl-textfield__label" for="inputField">Input</label>
  </div>

  <button onclick="addInput()">Add Input</button>

  <script>
    function addInput() {
      var formContainer = document.getElementById("formContainer");

      var input = document.createElement("input");
      input.setAttribute("class", "mdl-textfield__input");
      input.setAttribute("type", "text");
      input.setAttribute("id", "dynamicInput");

      var label = document.createElement("label");
      label.setAttribute("class", "mdl-textfield__label");
      label.setAttribute("for", "dynamicInput");
      label.innerText = "Dynamic Input";

      formContainer.appendChild(input);
      formContainer.appendChild(label);

      componentHandler.upgradeElement(formContainer); // 更新MDL样式
    }
  </script>
</body>
</html>

在上述示例中，首先引入了MDL的样式和脚本。然后，创建了一个包含一个输入框的父容器formContainer。点击"Add Input"按钮时，调用addInput()函数，在函数中动态创建了一个输入框和对应的标签，并将它们添加到父容器中。最后，使用componentHandler.upgradeElement()方法更新MDL样式，以确保新添加的元素也应用了MDL的样式。

这是一个简单的示例，你可以根据需要扩展和修改代码来满足具体的需求。

在MDL中动态添加表单元素

、、

我想动态地向表单添加一个文本输入元素。我正在为css3框架使用mdl。我将新元素添加到此表单中： <div id="enter-participant-details-div"> <div id="1" class="mdl-textfieldmdl-textfield--floatin

浏览 37提问于2016-09-02得票数 0

回答已采纳

1回答

为什么MDL芯片组件和Mustache.js不一起工作呢？

、、

( MDL ) 在从模板动态添加时不会呈现MDL 。JSFiddle，，展示了两个MDL芯片。第一个MDL芯片直接嵌入到DOM的<body>中。当Mustache.js考虑文档“就绪”时，使用JQuery动态添加第二个MDL芯片。会显示动态添加的MDL芯片，但不显示MDL工具提示。直接嵌入在H

浏览 1提问于2017-01-26得票数 2

回答已采纳

3回答

动态添加的复选框看起来不一样

、、、、

通过向HTML文件添加一个mdl-checkbox元素，我得到了以下结果：<label id="check" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"> <input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__in

浏览 46提问于2017-06-27得票数 0

回答已采纳

1回答

使用动态ng-model创建动态表单输入字段

、

我在控制器中有一个JSON对象，并且我希望使用ng-repeat生成动态输入字段。}, {brand:""}, {subCategory:""},]; <div class="mdl-textfield mdl<

浏览 4提问于2016-05-25得票数 0

2回答

通过JavaScript动态禁用MDL文本框

、

我知道我需要将元素升级到MDL检测更改。

浏览 4提问于2018-10-19得票数 5

回答已采纳

1回答

我们有一个适应MDL的基于ajax的大型GUI。整个页面内容是动态构建的(来自xml描述)。内存泄漏的原因是组件MaterialLayout向MediaQueryList (MDL1.1)添加了一个侦听器。this.screenSizeMediaQuery_.addListener(this.screenSizeHandler_.bind(this)); 在MDL1.1.2中，添加了两个windows事件处理程序因此DOM元素不是GC

浏览 5提问于2016-03-11得票数 0

回答已采纳

1回答

将项目动态添加到mdl菜单中。

、

我想动态地将菜单项添加到mdl菜单中。但是，我还没有弄清楚如何用mdl注册这些新项目，以便它们能够正常工作。下面是一个显示不同行为的。特别要注意的是，动态项不会产生连锁反应，或者在单击时关闭菜单。该代码笔对新创建的项和原始菜单元素都使用componentHandler.upgradeElement，没有效果。我已经注意到，正确创建的菜单项除了一些其他属性之外还有另一个类(mdl-js-ripple-effect)，但是手动添

浏览 6提问于2016-01-01得票数 0

回答已采纳

1回答

Javascript执行失败后通过Javascript添加的元素

、、

在我目前正在进行的一个项目中，有许多项目必须打开对话框。对于每个新的对话框，数据中的变化，以及我使用Javascript完成的数据。现在，如果我在Javascript的对话框中添加了任何元素，比如一个复选框，那么js就不会对它进行处理了。因此，我检查了一个类似的问题，并得到了一个答案，我已经实现了，但仍然不起作用。在这个片段中，我做了一个类似的情况。Add Button用于添加到对话框中，当dialog打开时，复选框的行为与页面加载期

浏览 7提问于2020-05-30得票数 0

回答已采纳

1回答

MDL upgradeElement / upgradeDom不工作

、、、

我有以下HTML代码：<a href="#scroll-tab-1" class="mdl-layout__tab">TAB1<span class="mdl-layout__tab-ripple-container mdl-js-ripple-effect" data

浏览 5提问于2015-11-02得票数 3

1回答

MDL升级每个选项卡上的所有动态列表元素

、、、

我有4个mdl选项卡，我在每个选项卡中动态创建mdl卡的列表。= document.createElement('ul');jobUl.appendChild(jobLi); j

浏览 23提问于2019-03-21得票数 1

回答已采纳

1回答

如何使用Vue.js绑定表单元格上的工具提示

、、、

我使用Vue.js在items上生成了一个表。我做错什么了？<div id="items"> <thead>-- v-bind working but tooltip is not show

浏览 4提问于2017-12-20得票数 1

4回答

材料设计表组件不能使动态行可选

、、

我用类mdl-data-table--selectable定义了它，它应该使其行具有可选性。如果它是在HTML中静态定义的，那么就会这样做，但是当我动态地创建我的节点并将它添加到表中时，它就不会变得可选了。请参阅我确实添加了一个componentHandler.upgradeElement(tr);，但是它并没有解决这个问题，它甚至抛出了一个异常，所以我继续没有这样做。目前，我正在删除它的所有内容，并再次生成需要动态添加元素

浏览 0提问于2015-07-22得票数 0

2回答

动态页面中的Google材料设计

但是，当主内容位于“mdl-js-布局”内时，无限滚动函数不能工作(如下图所示)。<header class="mdl-lay

浏览 7提问于2015-09-20得票数 2

2回答

如何更新/刷新动态添加到页面中的Google元素？

、、

我正在使用，这些组件为了简单而被简化，然后在加载页面时更完整地呈现。为说明这一问题，简化如下：<div class="switch"></div><div class="switch"> <jQuery查看switch.html并将<div class="switch"></div>呈现到DOM中，但是由于它是

浏览 6提问于2015-09-02得票数 19

回答已采纳

2回答

无法获得使用材料设计精巧的aurelia软件包

、、

试着用奥雷利亚建造，使用打字稿和添加材料设计精巧。我只是简单地克隆导航骨架但带有类型记录。但是，我在f12中收到多个错误： Cannot GET /jspm_packages/npm/aurelia-templating-router@1.0.0-beta.1.0.1/ 有什么想法吗

浏览 2提问于2015-12-08得票数 2

4回答

按钮(提交)没有工作-但输入(提交)工作

、

> <input class="mdl-textfield>"> <label class="mdl-textfield__label" for="user_mail">E

浏览 2提问于2016-05-16得票数 0

回答已采纳

2回答

使用React.js呈现MDL文本字段时出现问题

、、、

我遇到了一个非常奇怪的问题:带有浮动标签的输入文本框在没有React的情况下呈现它时工作得非常好，但是在通过React类呈现时却不能工作。"> <div className="mdl-cellmdl-cell--8-col">

浏览 2提问于2015-10-03得票数 3

回答已采纳

1回答

在Marionette中切换路由后，事件不起作用

、、、

然而，例如，当我切换路线时，我在mysite/#A上有一个带有涟漪效果的按钮，然后我转到mysite/#B，然后又回到mysite/#A，CSS一切正常，但Material Design的JS无法工作(我也试着在具体视图中重新导入相同的内容，仍然没有成功。如果我在浏览器中刷新页面，效果就会生效。如何在SPA内更改URL时执行此操作？如果需要项目或路由器实施的任何其他信息，请让我知道。

浏览 1提问于2016-06-02得票数 1

2回答

Javascript不适用于加载的内容

、、、、

: center;} padding: 24px;} <main class="mdl-layout__content" id="content"> </main></div>

浏览 1提问于2018-03-02得票数 0

2回答

使用动态innerHTML更改处理mdl-js样式的按钮

、、、

改变<button> innerHTML似乎会使mdl纹波效应失效。使用方法动态构建一个新元素作为解决方法，还是将其报告为bug？<body> <button id="myButton" class="mdl-button mdl-js-button mdl-js-ripple-effect">OLD VALUEwindow.addEventListener("load", () =&

浏览 3提问于2016-01-13得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

在MDL中动态添加表单元素

相关·内容

在MDL中动态添加表单元素

为什么MDL芯片组件和Mustache.js不一起工作呢？

动态添加的复选框看起来不一样

使用动态ng-model创建动态表单输入字段

通过JavaScript动态禁用MDL文本框

动态网站的MDL降级

将项目动态添加到mdl菜单中。

Javascript执行失败后通过Javascript添加的元素

MDL upgradeElement / upgradeDom不工作

MDL升级每个选项卡上的所有动态列表元素

如何使用Vue.js绑定表单元格上的工具提示

材料设计表组件不能使动态行可选

动态页面中的Google材料设计

如何更新/刷新动态添加到页面中的Google元素？

无法获得使用材料设计精巧的aurelia软件包

按钮(提交)没有工作-但输入(提交)工作

使用React.js呈现MDL文本字段时出现问题

在Marionette中切换路由后，事件不起作用

Javascript不适用于加载的内容

使用动态innerHTML更改处理mdl-js样式的按钮

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐