Question

我有一些html和javascript，但javascript仅在我将其放入onclick时执行。我正在尝试创建一个新的列表元素。

剂量工作：

<html>
<head>
<title></title>
<script type="text/javascript">

var newElement = document.createElement("li");
newElement.innerHTML = "hello";
var boo = document.getElementById("moo");
boo.appendChild(newElement);

</script>
</head>
<body>
<ul id="moo">
    <li>loo</li>
</ul>
</body>
</html>

确实有效：

<html>
<head>
<title></title>
<script type="text/javascript">
function hoo(){
var newElement = document.createElement("li");
newElement.innerHTML = "hello";
var boo = document.getElementById("moo");
boo.appendChild(newElement);
}
</script>
</head>
<body onclick="hoo()">
<ul id="moo">
    <li>loo</li>
</ul>
</body>
</html>

我做错了什么并不让它自己执行？提前谢谢。

Answer 1

您使用id=moo加载脚本元素的那一刻尚未创建。所以var boo = document.getElementById("moo");找不到任何元素。尝试在创建DOM后加载脚本。

在第二个代码中，您在调用函数时创建了DOM，因此var boo = document.getElementById("moo");可以找到该元素并且它按预期工作。

首先尝试代码：

<html>
<head>
<title></title>
</head>
<body>
<ul id="moo">
    <li>loo</li>
</ul>

<script type="text/javascript">

var newElement = document.createElement("li");
newElement.innerHTML = "hello";
var boo = document.getElementById("moo");
boo.appendChild(newElement);

</script>

</body>
</html>

Answer 2

您的问题是由您在页面顶部执行脚本引起的。那时DOM还没有被解析，脚本将无法找到标识为moo的元素。

因此，请将脚本放在页面底部：

<html>
<head>
<title></title>
</head>
<body>
<ul id="moo">
    <li>loo</li>
</ul>
</body>
<script type="text/javascript">

var newElement = document.createElement("li");
newElement.innerHTML = "hello";
var boo = document.getElementById("moo");
boo.appendChild(newElement);

</script>
</html>

Answer 3

当Javascript尝试执行此行时 var boo = document.getElementById("moo"); id =“moo”的元素尚不存在。在关闭</body>

之前尝试移动所有JS代码

我的javascript仅在函数中有效

3 个答案: