尝试使用Javascript向我的有序列表添加新的li元素，有人知道为什么这段代码不工作吗?

Trying to use Javascript to add new li element to my ordered list, anyone know why this code isn't working?

本文关键字：段代码 为什么 工作 代码 元素 我的 Javascript 列表 li 添加      更新时间：2023-09-26

这是我的HTML文件

<!DOCTYPE html>
<html>
<head>
    <title>Hi</title>
    <script type='text/javascript' src='script.js'></script>
</head>
<body>
    <h1>Fruit Self</h1>
    <ol id=”fruits”></ol>
        Pick a fruit:
    <input type="text" id="newfruit">
    <h1>Basket</h1>
    <ol id=”basket”></ol>
    </body>
</html>
这是我的JavaScript文件 
function myFunction()
{
    var newElement = document.createElement("li");
    newElement.textContent = "I am new";
    var ol = document.getElementById("fruits");
    ol.appendChild(newElement);
}

我试图使用JavaScript添加一个新的<li>元素到我的<ol>水果。知道为什么不行吗?

存在一些问题:

  1. 你已经定义了一个函数，但是你从来没有调用过它，所以里面的代码从来没有运行过。

  2. 如果你从脚本中运行它，你有script标签，它会失败，因为元素还不存在。

  3. ”不是HTML属性的正确引号。"。

如果您将script标签移动到正文的末尾，就在关闭</body>标签之前，修复引号，然后调用该函数，它可以工作:

function myFunction() {
  var newElement = document.createElement("li");
  newElement.textContent = "I am new";
  var ol = document.getElementById("fruits");
  ol.appendChild(newElement);
}
myFunction();
<h1>Fruit Self</h1>
<ol id="fruits"></ol>
Pick a fruit:
<input type="text" id="newfruit">
<h1>Basket</h1>
<ol id="basket"></ol>

为清楚起见，

作为非代码段:

<!DOCTYPE html>
<html>
<head>
    <title>Hi</title>
</head>
<body>
    <h1>Fruit Self</h1>
    <ol id="fruits"></ol>
        Pick a fruit:
    <input type="text" id="newfruit">
    <h1>Basket</h1>
    <ol id="basket"></ol>
    <script type='text/javascript' src='script.js'></script>
</body>
</html>

和

function myFunction() {
  var newElement = document.createElement("li");
  newElement.textContent = "I am new";
  var ol = document.getElementById("fruits");
  ol.appendChild(newElement);
}
myFunction();

旁注:你可以而且应该离开你的script标签的type。

相关文章：