如何通过在JavaScript中使用appendChild()函数在任何预期的位置添加按钮?
问题描述:
我想通过使用javaScript在发生某个事件时在我的网页中添加一个按钮。我在网上搜索了很多,并试图通过使用appendChild()函数来解决这个问题。如何通过在JavaScript中使用appendChild()函数在任何预期的位置添加按钮?
我的代码是这样的:
var btn = document.createElement(‘button’);
btn.body.appendChild(btn);
在这里,我面临两个问题
- 我的按钮添加,但在我的html页面的某个角落和
- 我不能添加样式到这个新创建的按钮,而不提供其他按钮的CSS。
那么,怎样才能我一定现在的位置添加此按钮,并提前添加CSS来此按钮
感谢。
答
-
你的第一个问题是你的身体后添加的按钮。这样你的按钮就出现在你的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;
}
答
其附加到文件,而不是一个按钮..
var btn = document.createElement('button');
btn.innerText="button";
btn.style.background="red";
document.body.appendChild(btn);