【问题标题】：how to make a button dynamically in Javascript如何在Javascript中动态制作按钮
【发布时间】：2017-07-11 07:22:27
【问题描述】：

我正在尝试在 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(button);

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

【问题讨论】：

如果你使用的是jquery，为什么不试试 $('#btnSendMailClone').click(function(){});而不是写一个单独的函数？
你用的是什么浏览器？
Creating Dynamic button with click event in javascript的可能重复

标签： javascript html button input

【解决方案1】：

您的代码运行良好

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 !");
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

可能的问题A

你使用的是IE，那么你将不得不更换

document.body.appendChild(button);

与

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

可能的问题B

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

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

【讨论】：

【解决方案2】：

我认为您的文档还没有准备好追加。尝试在document.ready 之后使用追加按钮。不要忘记添加 jquery 链接

更新

中心位置按钮

$(document).ready(function() {
  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').addClass('center')

})

function btnSendMail_Click() {
  console.log($('input')[0].outerHTML)
}

.center {
  margin: auto;
  width: 98px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

按钮如何居中，因为此处的左右边距不起作用
@janakgera 您使用的是margin-right 而不是margin-left
@janakgera 边距对按钮中心位置没有更多影响尝试在水平方向使用一些转换属性精确中心。请参阅我的更新答案

【解决方案3】：

你有很多选择。一个简单的解决方案是使用以下方法测试 body 是否存在：

if(document.body != null){ document.body.appendChild(button); }

另一个选项是通过选择标签名称来使用它：

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

对于动态操作，您应该深入了解 jQuery：

$('body').append(button);
or
$('body').html(button);

【讨论】：

【解决方案4】：

根据您的代码的最后一行，您似乎正在使用 jQuery，因此我建议您使用它创建按钮：

var button = $('<button type="submit" id="btnSendMailClone" class="btn btn-primary" style="margin-right:100px:width:98%">Submit</button>');
button.on('click',btnSendMail_Click):
$('body').append(button);

希望对你有帮助

【讨论】：