Question

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

Answer 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);
 });

//改成“ meta charset =” UTF-8“”。

Answer 2

在这里工作演示

var nodes = List.of(
    new Node("Error", "xyz"), new Node("Success", "abc"),
    new Node("none", "prq"), new Node("Success", ""),
    new Node("Success", "xyz"), new Node("Warning", "efc")
);

var map = nodes.stream()
               .collect(Collectors.groupingBy(Node::getType,
                        Collectors.mapping(Node::getName, Collectors.toList())));

System.out.println(map);

{Warning=[efc], Error=[xyz], none=[prq], Success=[abc, , xyz]}

Answer 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();是未定义的对象。这是一个带有工作示例的小提琴：

https://jsfiddle.net/2Lon63uj/

Answer 4

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

Answer 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>

在JavaScript中创建按钮元素

5 个答案: