如何通过在JavaScript中使用appendChild（）函数在任何预期的位置添加按钮？

Question

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

我的代码是这样的：

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

在这里，我面临两个问题

1. 我的按钮添加，但在我的html页面的某个角落和
2. 我不能添加样式到这个新创建的按钮，而不提供其他按钮的CSS。

那么，怎样才能我一定现在的位置添加此按钮，并提前添加CSS来此按钮

感谢。

Answer 1

1. 你的第一个问题是你的身体后添加的按钮。这样你的按钮就出现在你的html页面的某个角落。 为了解决这个问题，你可以在包含div的id后加上这个。而这个div必须在你预期的位置。 让一个div哪个ID是myButton的在您的预期位置

   ID = “Add按钮”

这个ID这样

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

之后再附加您的按钮

要为此新创建的按钮提供CSS，您的CSS代码将是这样的

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

提供悬停效果，代码将出现

#addButton button:hover { 
      background: red; 
     } 

Answer 2

其附加到文件，而不是一个按钮..

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