用JS创建一个按钮

时间:2019-08-14 17:28:25

标签: javascript html

我正在尝试创建一个按钮并将其附加到Javascript中的HTML。

这是我的代码:

<html>

    <head>
        <script>
             var btn=document.createElement("button");
             btn.className = "YourClass";
             btn.className += " YourClass2";
             btn.id ='someId';
             document.getElementById("main").appendChild(btn);
        </script>
    </head>

    <body>
        <div id = 'main'>
        </div>
    </body>

</html>

不幸的是,这不起作用,我也不明白为什么。

1 个答案:

答案 0 :(得分:-1)

只需要将脚本标签移到要定位的DIV下... JS甚至在加载DIV之前就已加载并引用了DIV。而且.classList是一种管理元素上的类的更好的方法:)

<html>
<head>
</head>
<body>
  <div id="main"></div>

  <script>
    var btn=document.createElement("button");
    btn.classList.add('YourClass', 'YourClass2');

    btn.appendChild(document.createTextNode('Press me'));

    btn.id ='someId';
    document.getElementById("main").appendChild(btn);
  </script>
</body>

</html>