kmu*_*een 6 html javascript element button createelement
我正在尝试在javascript不使用 的情况下创建一个按钮元素jQuery。
当我尝试将其附加到 DOM 时，我不断收到错误消息。
“无法读取 null 的属性‘appendChild’”
我到处都找遍了，但找不到如何创建按钮。在 w3Schools 示例中，他们在已经在 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);
您的脚本在 DOM 完成加载之前运行，因此在您的 'btn' div 存在之前运行。对此有一些简单的解决方案。一种是将脚本标签移动到正文的底部，例如：
<!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>
另一种更好的解决方案是在脚本中添加一行，以确保 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"".
工作演示在这里
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>| 归档时间： |
|
| 查看次数： |
25992 次 |
| 最近记录： |