如何使用 javascript 定位 li 中的元素答案

【问题标题】：How to target elements in li with javascript如何使用 javascript 定位 li 中的元素
【发布时间】：2021-12-23 22:12:45
【问题描述】：

这是一段 javascript 代码，例如我想更改嵌套在 li 中的 span 中的文本。我如何使用 DOM 来定位这些元素？

var body = document.getElementsByTagName('body')[0]
body.style.fontFamily = "Arial";
var name = document.getElementsById('name');
var index = document.getElementsById('index');
var hometown = document.getElementsById('hometown');
name.innerHTML = "NAME";
index.innerHTML = "INDEX";
hometown.innerHTML = "HOMETOWN";

<h1>About Me</h1>
<ul>
  <li>Name: <span id="name"></span></li>
    <li>Index: <span id="index"></span></li>
      <li>Hometown: <span id="hometown"></span></li>
</ul>

【问题讨论】：

@mplungjan “Typo.getElementById 是单数”是什么意思？

标签： javascript html css dom

【解决方案1】：

首先你在getElementsById 中有错字，应该是getElementById。其次，您应该 += HTML 而不仅仅是 =，因为它会删除 HTML 中的文本并将其替换为您在 JavaScript 中设置的值。最后一点，最好给<li>一个id，我认为这比制作span更足够。

这是固定的 HTML 和 JS：

document.getElementById("name").innerHTML += "anything";
document.getElementById("index").innerHTML += "anything";
document.getElementById("hometown").innerHTML += "anything";

<h1>About Me</h1>
<ul>
  <li id="name">Name:
    <li id="index">Index:
      <li id="hometown">Hometown:
</ul>

【讨论】：

1.我想我们已经讨论了死亡的拼写。 2. 跨度是空的，所以不需要 += 除非你像以前那样删除跨度

【解决方案2】：

您在脚本中有拼写错误 getElementById 而不是 getElementsById

HTML 也有一些标签问题

试试这个

<ul>
  <li>Name: <span id="name"></span></li>
  <li>Index: <span id="index"></span></li>
  <li>Hometown: <span id="hometown"></span></li>
</ul>



    var body = document.getElementsByTagName('body')[0]
    body.style.fontFamily = "Arial";
    var name = document.getElementById('name');
    var index = document.getElementById('index');
    var hometown = document.getElementById('hometown');
    name.innerHTML = "NAME";
    index.innerHTML = "INDEX";
    hometown.innerHTML = "HOMETOWN";

【讨论】：

var name 和 name.innerHTML="NAME" 不起作用。

【解决方案3】：

错字：getElementById 是单数 - 它是 getElementById 而不是 getElementsById
也没有与页面中的 ID 同名的 var - 它隐藏了 var
另外，出于格式化原因，请关闭<li>

var body = document.getElementsByTagName('body')[0]
body.style.fontFamily = "Arial";
var nameSpan = document.getElementById('name'); // either change the var or the ID - I suggest the ID since name is used in several places like window.name etc
var index = document.getElementById('index');
var hometown = document.getElementById('hometown');
nameSpan.innerHTML = "NAME";
index.innerHTML = "INDEX";
hometown.innerHTML = "HOMETOWN";

<h1>About Me</h1>
<ul>
  <li>Name: <span id="name"></span></li>
  <li>Index: <span id="index"></span></li>
  <li>Hometown: <span id="hometown"></span></li>
</ul>

【讨论】：