可能的问题A

Question

我正在尝试在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脚本的新手.Pleas指导我做错了

Answer 1

我认为您的文档未准备好追加。请在document.ready之后尝试附加按钮。并且不要忘记添加jquery链接

<强>更新

中心位置按钮

＆＃13;

$(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)
}

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

您的代码运行正常

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

可能的问题A

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

document.body.appendChild(button);

与

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

可能的问题B

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

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

Answer 3

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

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

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

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

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

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

Answer 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);

希望有所帮助

如何在Javascript中动态制作按钮

4 个答案:

可能的问题A

可能的问题B