如何使用 javascript 编辑列表项元素答案

【问题标题】：How to edit List Item Elements using javascript如何使用 javascript 编辑列表项元素
【发布时间】：2022-12-18 03:06:05
【问题描述】：

我正在尝试使用一些将通过谷歌开发控制台运行的 javascript 将“牛奶”更改为燕麦牛奶。 HTML 看起来像；

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="groceries-section">
      <h1>Our Shopping List</h1>
      <ul id="grocery-list">
        <li>Milk</li>
      </ul>
    </div>
    <script src="main.js"></script>
  </body>
</html>

我可以使用 id ；

document.getElementById("grocery-list")

但我不确定如何访问“牛奶”li。我对此很陌生，因此不胜感激。

【问题讨论】：

我确定这是一个重复的问题，所以我会在这里发表评论：const li = document.querySelector('#grocery-list > li')
试试document.querySelector("#grocery-list li")

标签： javascript html

【解决方案1】：

您可以使用 querySelector 获取 ul 元素内的第一个 li 元素和 id grocery-list。

document.getElementById("grocery-list").querySelector("li").innerHTML = "Oat Milk";

【讨论】：