在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的样式。
这是一个简单的示例，你可以根据需要扩展和修改代码来满足具体的需求。
相关·内容
1回答
在MDL中动态添加表单元素
javascript、jquery、material-design
我想动态地向表单添加一个文本输入元素。我正在为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不一起工作呢？
javascript、mustache、material-design-lite
( MDL ) 在从模板动态添加时不会呈现MDL 。JSFiddle，，展示了两个MDL芯片。第一个MDL芯片直接嵌入到DOM的<body>中。当Mustache.js考虑文档“就绪”时，使用JQuery动态添加第二个MDL芯片。
会显示动态添加的MDL芯片，但不显示MDL工具提示。直接嵌入在H
浏览 1提问于2017-01-26得票数 2
回答已采纳
3回答
动态添加的复选框看起来不一样
javascript、jquery、dom、material-design、material-design-lite
通过向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创建动态表单输入字段
javascript、angularjs
我在控制器中有一个JSON对象，并且我希望使用ng-repeat生成动态输入字段。}, {brand:""}, {subCategory:""},]; <div class="mdl-textfield mdl<
浏览 4提问于2016-05-25得票数 0
2回答
通过JavaScript动态禁用MDL文本框
javascript、material-design-lite
我知道我需要将元素升级到MDL检测更改。
浏览 4提问于2018-10-19得票数 5
回答已采纳
1回答
动态网站的MDL降级
javascript、memory-leaks、material-design-lite
我们有一个适应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菜单中。
javascript、material-design-lite
我想动态地将菜单项添加到mdl菜单中。但是，我还没有弄清楚如何用mdl注册这些新项目，以便它们能够正常工作。
下面是一个显示不同行为的。特别要注意的是，动态项不会产生连锁反应，或者在单击时关闭菜单。该代码笔对新创建的项和原始菜单元素都使用componentHandler.upgradeElement，没有效果。我已经注意到，正确创建的菜单项除了一些其他属性之外还有另一个类(mdl-js-ripple-effect)，但是手动添
浏览 6提问于2016-01-01得票数 0
回答已采纳
1回答
Javascript执行失败后通过Javascript添加的元素
javascript、dom-events、material-design-lite
在我目前正在进行的一个项目中，有许多项目必须打开对话框。对于每个新的对话框，数据中的变化，以及我使用Javascript完成的数据。现在，如果我在Javascript的对话框中添加了任何元素，比如一个复选框，那么js就不会对它进行处理了。因此，我检查了一个类似的问题，并得到了一个答案，我已经实现了，但仍然不起作用。在这个片段中，我做了一个类似的情况。Add Button用于添加到对话框中，当dialog打开时，复选框的行为与页面加载期
浏览 7提问于2020-05-30得票数 0
回答已采纳
1回答
MDL upgradeElement / upgradeDom不工作
javascript、element、upgrade、material-design-lite
我有以下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升级每个选项卡上的所有动态列表元素
javascript、html、material-design、material-design-lite
我有4个mdl选项卡，我在每个选项卡中动态创建mdl卡的列表。= document.createElement('ul');jobUl.appendChild(jobLi);
j
浏览 23提问于2019-03-21得票数 1
回答已采纳
1回答
如何使用Vue.js绑定表单元格上的工具提示
javascript、html、vue.js、material-design-lite
我使用Vue.js在items上生成了一个表。我做错什么了？<div id="items"> <thead>-- v-bind working but tooltip is not show
浏览 4提问于2017-12-20得票数 1
4回答
材料设计表组件不能使动态行可选
javascript、material-design、material-design-lite
我用类mdl-data-table--selectable定义了它，它应该使其行具有可选性。如果它是在HTML中静态定义的，那么就会这样做，但是当我动态地创建我的节点并将它添加到表中时，它就不会变得可选了。请参阅
我确实添加了一个componentHandler.upgradeElement(tr);，但是它并没有解决这个问题，它甚至抛出了一个异常，所以我继续没有这样做。目前，我正在删除它的所有内容，并再次生成需要动态添加元素
浏览 0提问于2015-07-22得票数 0
2回答
动态页面中的Google材料设计
material-design-lite
但是，当主内容位于“mdl-js-布局”内时，无限滚动函数不能工作(如下图所示)。<header class="mdl-lay
浏览 7提问于2015-09-20得票数 2
2回答
如何更新/刷新动态添加到页面中的Google元素？
jquery、html、dynamic
我正在使用，这些组件为了简单而被简化，然后在加载页面时更完整地呈现。为说明这一问题，简化如下：<div class="switch"></div><div class="switch">
<jQuery查看switch.html并将<div class="switch"></div>呈现到DOM中，但是由于它是
浏览 6提问于2015-09-02得票数 19
回答已采纳
2回答
无法获得使用材料设计精巧的aurelia软件包
typescript、aurelia、material-design-lite
试着用奥雷利亚建造，使用打字稿和添加材料设计精巧。我只是简单地克隆导航骨架但带有类型记录。但是，我在f12中收到多个错误：
Cannot GET /jspm_packages/npm/aurelia-templating-router@1.0.0-beta.1.0.1/
有什么想法吗
浏览 2提问于2015-12-08得票数 2
4回答
按钮(提交)没有工作-但输入(提交)工作
php、html
>
<input class="mdl-textfield>">
<label class="mdl-textfield__label" for="user_mail">E
浏览 2提问于2016-05-16得票数 0
回答已采纳
2回答
使用React.js呈现MDL文本字段时出现问题
javascript、html、reactjs、material-design-lite
我遇到了一个非常奇怪的问题:带有浮动标签的输入文本框在没有React的情况下呈现它时工作得非常好，但是在通过React类呈现时却不能工作。"> <div className="mdl-cellmdl-cell--8-col">
浏览 2提问于2015-10-03得票数 3
回答已采纳
1回答
在Marionette中切换路由后，事件不起作用
backbone.js、marionette、backbone-events、backbone-routing
然而，例如，当我切换路线时，我在mysite/#A上有一个带有涟漪效果的按钮，然后我转到mysite/#B，然后又回到mysite/#A，CSS一切正常，但Material Design的JS无法工作(我也试着在具体视图中重新导入相同的内容，仍然没有成功。如果我在浏览器中刷新页面，效果就会生效。如何在SPA内更改URL时执行此操作？如果需要项目或路由器实施的任何其他信息，请让我知道。
浏览 1提问于2016-06-02得票数 1
2回答
Javascript不适用于加载的内容
javascript、jquery、html、css、ajax
: center;}
padding: 24px;} <main class="mdl-layout__content" id="content">
</main></div>
浏览 1提问于2018-03-02得票数 0
2回答
使用动态innerHTML更改处理mdl-js样式的按钮
javascript、html、css、material-design-lite
改变<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元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
