javascript - 如何在Javascript中动态制作按钮

标签 javascript html button input

我正在尝试用 javascript 制作一个动态按钮

    var button = document.createElement('input');
    button.setAttribute('type', 'submit');
    button.setAttribute('ID', 'btnSendMailClone');
    button.setAttribute('value', 'Submit');
    button.setAttribute('onclick', 'btnSendMail_Click()');
    button.setAttribute('form', 'myform');
    document.body.appendChild(button);
    button.setAttribute("class", "btn btn-primary");
    $('#button').addClass('myClass');
   $('#btnSendMailClone').css("margin-right", "100px")
    $('#btnSendMailClone').css("width", "98");

通过单击该事件,它应该出现在其单击事件上

function btnSendMail_Click() {
           debugger;

        }

按钮我调试它在这一行给我错误

document.body.appendChild(按钮);

它说无法获取属性附加子项。我是java脚本的新手。请指导我做错了什么

最佳答案

您的代码运行良好

var button = document.createElement('input');
button.setAttribute('type', 'submit');
button.setAttribute('ID', 'btnSendMailClone');
button.setAttribute('value', 'Submit');
button.setAttribute('onclick', 'btnSendMail_Click()');
button.setAttribute('form', 'myform');
document.body.appendChild(button);
button.setAttribute("class", "btn btn-primary");
$('#button').addClass('myClass');
$('#btnSendMailClone').css("margin-right", "100px")
$('#btnSendMailClone').css("width", "98");

function btnSendMail_Click() {
  console.log("Submit !");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

可能的问题A

您正在使用 IE,那么您必须更换 IE

document.body.appendChild(button);

document.getElementsByTagName('body')[0].appendChild(button);

可能的问题B

您的脚本位于 <head> 内。这将在<body>之前执行脚本。已被浏览器看到。要解决此问题,请将脚本移到文档末尾

或者您可以使用$(document).ready(function(){...})

关于javascript - 如何在Javascript中动态制作按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45027943/

相关文章:

javascript - 在 ES6 类构造函数中工作

javascript - 字符串变量中以逗号分隔的字符串值

javascript - 提交按钮无法正常工作

html - 使两个 HTML 按钮并排显示

javascript - 如何使用页面名称作为文本框值

c# - Jquery表单submit()到 Controller 中的操作然后返回一个对象到客户端并且不重新加载页面

javascript - 使用css将标题分成jquery中的列

html - 纯CSS条件菜单: hide level1 info on level2 hover

java - java eclipse eventsystem 仅在有打印功能时才起作用

javascript - 如何更改数组中的每个第二个和第三个元素?