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

Question

Here is a code of javascript for example i want to change the text in the span that is nested in li. How do i use the DOM to target this elements ?

 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>Index: <span id="index"></span> <li>Hometown: <span id="hometown"></span> </ul>

Answer 1

• Typo: getElementById is singular - it is getElementById and not getElementsById
• Also don't have a var with the same name as an ID in the page – it hides the var
• Also please close the <li> for formatting reasons

 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>

Answer 2

Firsts of all you have a typo in getElementsById , it should be getElementById . And second, you should += the HTML not just = , cause it deletes the text in your HTML and replace it with the value you set in JavaScript. And the last thing, it's better to give an id for <li> , it's more sufficient than making span, I think.

This is te fixed HTML and 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>

Answer 3

you have typos in the script as getElementById not getElementsById

Also HTML Have some tag issue

Try this

<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";