在 JavaScript 中创建按钮元素答案

【问题标题】：Create Button Element in JavaScript在 JavaScript 中创建按钮元素
【发布时间】：2018-12-03 00:45:51
【问题描述】：

我正在尝试在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);

【问题讨论】：

看起来#btn 不存在。
它在我的 html 中作为 div 存在
看起来不像，至少在脚本运行时不是，否则它不会是null
如果没有看到您的 HTML 和 JS 在运行中，很难帮助您。请创建一个minimal reproducible example。
所以我的 html 中有一个 id 为“btn”的 div。我正在尝试在 javascript 中创建一个按钮元素，并将该按钮附加到具有按钮 ID 的 div 中。我知道这听起来很愚蠢......我只是想练习和熟悉 javascript。

标签： javascript html button element createelement

【解决方案1】：

您的脚本在 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"".

【讨论】：

【解决方案2】：

page 很可能是未定义的对象。这是一个工作示例：

https://jsfiddle.net/2Lon63uj/

【讨论】：

【解决方案3】：

工作演示在这里

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>

【讨论】：

【解决方案4】：

您确定您的 HTML 文件可以看到您的脚本吗？为什么不尝试在控制台窗口上运行小测试。查看这些元素的输出，看看它是否给出了 null。

【讨论】：

【解决方案5】：

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>

【讨论】：