如何在模态框内动态创建一个复选框输入框和一个按钮
要在模态框内动态创建一个复选框输入框和一个按钮，可以使用JavaScript和HTML的组合来实现。
首先，在模态框的HTML代码中创建一个容器，用于存放动态生成的复选框输入框和按钮。例如：
<div id="dynamicContainer"></div>
然后，在JavaScript中使用DOM操作动态创建复选框输入框和按钮，并将它们添加到容器中。例如：
// 获取容器元素
var container = document.getElementById("dynamicContainer");
// 创建复选框输入框
var checkbox = document.createElement("input");
checkbox.setAttribute("type", "checkbox");
container.appendChild(checkbox);
// 创建按钮
var button = document.createElement("button");
button.innerHTML = "按钮";
container.appendChild(button);
最后，将上述JavaScript代码放在模态框打开时的事件处理程序中，以确保在模态框打开时动态创建复选框输入框和按钮。
完整的示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>动态创建复选框和按钮</title>
</head>
<body>
<!-- 模态框 -->
<div id="myModal" class="modal">
<!-- 模态框内容 -->
<div class="modal-content">
<!-- 容器 -->
<div id="dynamicContainer"></div>
</div>
</div>
<!-- 按钮 -->
<button id="openModalBtn" onclick="openModal()">打开模态框</button>
<script>
function openModal() {
// 获取容器元素
var container = document.getElementById("dynamicContainer");
// 创建复选框输入框
var checkbox = document.createElement("input");
checkbox.setAttribute("type", "checkbox");
container.appendChild(checkbox);
// 创建按钮
var button = document.createElement("button");
button.innerHTML = "按钮";
container.appendChild(button);
// 打开模态框
var modal = document.getElementById("myModal");
modal.style.display = "block";
}
</script>
</body>
</html>
以上代码中，通过点击"打开模态框"按钮，将动态创建一个复选框输入框和一个按钮，并将它们添加到模态框的容器中
原文地址: http://www.cveoy.top/t/topic/h1YW 著作权归作者所有。请勿转载和采集!