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

Question

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

我的代码是这样的:

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

这里我面临两个问题

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

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

提前致谢。

Answer 1

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

   id="addButton"

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

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

1. 要为这个新创建的按钮提供 CSS，您的 CSS 代码将如下所示

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

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

   #addButton button:hover {
            background: red;
        }