在 JavaScript 中创建按钮元素
[英]Create Button Element in JavaScript
问题描述
I'm trying to create a button element in javascript without using jQuery .
我正在尝试在不使用jQuery情况下在javascript创建一个按钮元素。
I keep getting an error when I try to append it to the DOM.当我尝试将其附加到 DOM 时，我不断收到错误消息。
"Cannot read property 'appendChild' of null"
I've looked everywhere and couldn't find out how to create a button.我到处找，但找不到如何创建按钮。 In the w3Schools example they are using a function on a button element that was already created in the HTML, which isn't what I'm trying to do.在 w3Schools 示例中，他们在 HTML 中已经创建的按钮元素上使用了一个函数，这不是我想要做的。 Here's what I have.这就是我所拥有的。
HTML: HTML：
<!DOCTYPE html>
<html lang="en">
<head>
meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="myapp.js"></script>
</head>
<body>
<div id="btn">Button Here</div>
</body>
</html>
myapp.js我的应用程序
var element = document.createElement("button");
element.appendChild(document.createTextNode("Click Me!"));
var page = document.getElementById("btn");
page.appendChild(element);
console.log(element);
5 个解决方案
解决方案1
4 2018-06-24 03:21:03
Your script is running before the DOM has finished loading, so before your 'btn' div exists.您的脚本在 DOM 完成加载之前运行，因此在您的 'btn' div 存在之前。 There are a few simple solutions to this.有几个简单的解决方案。 One is moving your script tag to the bottom of the body, eg:一种是将您的脚本标签移动到正文的底部，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="btn">Button Here</div>
<script src="myapp.js"></script>
</body>
</html>
The other, better, solution is adding a line to your script to make sure the HTML has loaded before the script runs.另一个更好的解决方案是在脚本中添加一行，以确保在脚本运行之前已加载 HTML。
document.addEventListener("DOMContentLoaded", function() {
var element = document.createElement("button");
element.appendChild(document.createTextNode("Click Me!"));
var page = document.getElementById("btn");
page.appendChild(element);
console.log(element);
});
// Corrected "meta charset="UTF-8"".
解决方案2
0 2018-06-24 02:52:06
Working demo here工作演示在这里
function createButton() { var element = document.createElement("button"); element.appendChild(document.createTextNode("Click Me!")); var page = document.getElementById("btn"); page.appendChild(element); console.log(element); } createButton();
<div id="btn"> </div>
解决方案3
0 2018-06-24 02:52:58
It's likely that page is the object that is undefined. page很可能是未定义的对象。 Here's a fiddle with a working example:这是一个带有工作示例的小提琴：
https://jsfiddle.net/2Lon63uj/ https://jsfiddle.net/2Lon63uj/
解决方案4
0 2018-06-24 04:13:04
Are you sure your HTML file can see your script.您确定您的 HTML 文件可以看到您的脚本吗？ Why not try running small tests on the console window.为什么不尝试在控制台窗口上运行小测试。 View of the output of those elements and see if it gives null.查看这些元素的输出，看看它是否给出 null。
解决方案5
0 2019-09-09 22:05:12
function myFunction() { var btn = document.createElement("BUTTON"); btn.innerHTML = "CLICK ME"; document.body.appendChild(btn); }
<!DOCTYPE html> <html> <body> <p>Click the button to make a BUTTON element with text.</p> <button onclick="myFunction()">Try it</button> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.