如何在 JavaScript 中使用 appendChild() 函数在任何预期的位置添加按钮？

Question

我想在发生特定事件时通过使用 javaScript 在我的网页中添加一个按钮。我在网上搜索了很多，并尝试通过使用 appendChild() 函数来解决这个问题。

我的代码是这样的：

var btn = document.createElement(‘button’);
btn.body.appendChild(btn);

这里我面临两个问题

1. 我的按钮已添加，但在我的 html 页面的某个角落并且
2. 如果不向其他按钮提供 css，我无法为这个新创建的按钮添加样式。

那么如何在某个位置添加这个按钮并在这个按钮上添加css

提前致谢。

Answer 1

将其附加到文档而不是按钮..

var btn = document.createElement('button');
   btn.innerText="button";
   btn.style.background="red";
document.body.appendChild(btn);

Answer 2

1. 您的第一个问题是您在正文之后添加了按钮。这样您的按钮就会出现在 html 页面的某个角落。 要解决此问题，您可以在包含 div 的 id 之后添加它。而这个 div 一定在你期望的位置。 在你期望的位置div创建一个id是myButton的

   id="addButton"

然后像这样在这个 id 后面附加你的按钮

document.getElementById("addButton").appendChild(newButton);

2. 要向这个新创建的按钮提供 CSS，您的 CSS 代码将像这样

   #addButton button {
           display: block;
           background: green;
           padding: 10px;
           color: #ffffff;
       }
   

要提供悬停效果，您的代码将是

   #addButton button:hover {
            background: red;
        }