模态框内动态创建复选框输入框和按钮 - JavaScript 代码示例 - 常规

'如何在模态框内动态创建一个复选框输入框和一个按钮' - '要在模态框内动态创建一个复选框输入框和一个按钮，可以使用JavaScript和HTML的组合来实现。\n\n首先，在模态框的HTML代码中创建一个容器，用于存放动态生成的复选框输入框和按钮。例如：\n\n\n<div id=\'dynamicContainer\'>\</div>\n\n\n然后，在JavaScript中使用DOM操作动态创建复选框输入框和按钮，并将它们添加到容器中。例如：\n\njavascript\n// 获取容器元素\nvar container = document.getElementById(\'dynamicContainer\');\n\n// 创建复选框输入框\nvar checkbox = document.createElement(\'input\');\ncheckbox.setAttribute(\'type\', \'checkbox\');\ncontainer.appendChild(checkbox);\n\n// 创建按钮\nvar button = document.createElement(\'button\');\nbutton.innerHTML = \'按钮\' ;\ncontainer.appendChild(button);\n\n\n最后，将上述JavaScript代码放在模态框打开时的事件处理程序中，以确保在模态框打开时动态创建复选框输入框和按钮。\n\n完整的示例代码如下：\n\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <title>动态创建复选框和按钮</title>\n</head>\n<body>\n\n\n<div id=\'myModal\' class=\'modal\'>\n \n <div class=\'modal-content\'>\n \n <div id=\'dynamicContainer\'>\</div>\n </div>\n</div>\n\n\n<button id=\'openModalBtn\' onclick=\'openModal()\'>打开模态框</button>\n\n<script>\n function openModal() {\n // 获取容器元素\n var container = document.getElementById(\'dynamicContainer\');\n\n // 创建复选框输入框\n var checkbox = document.createElement(\'input\');\n checkbox.setAttribute(\'type\', \'checkbox\');\n container.appendChild(checkbox);\n\n // 创建按钮\n var button = document.createElement(\'button\');\n button.innerHTML = \'按钮\' ;\n container.appendChild(button);\n\n // 打开模态框\n var modal = document.getElementById(\'myModal\');\n modal.style.display = \'block\' ;\n }\n</script>\n\n</body>\n</html>\n\n\n以上代码中，通过点击'打开模态框'按钮，将动态创建一个复选框输入框和一个按钮，并将它们添加到模态框的容器中。