Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

270
Views
How to target elements in li with javascript

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

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

  • 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>

about 4 years ago · Juan Pablo Isaza Report

0

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>

about 4 years ago · Juan Pablo Isaza Report

0

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";
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!