Question 118733 in Html Question posted in
Some basic documentation can be found here.

Html – How to create individual list items with JavaScript

I’d like to create a new li for each variable, but instead I get one li with all of the variables together.

var ul = document.getElementById("results");
const li = document.createElement("li");
let vin = "VIN: " + result['vin'];
let country = "Country: " + result["country"];
let manuf = "Manufacturer: " + result["manufacturer"];
let region = "Region: " + result["region"];
let years = "Years: " + result["years"];

li.append(document.createTextNode(vin));
ul.append(li)
li.append(document.createTextNode(country));
ul.append(li)
li.append(document.createTextNode(manuf));
ul.append(li)
li.append(document.createTextNode(region));
ul.append(li)
li.append(document.createTextNode(years));
ul.append(li)

This is what I get:

VIN: 4F2YU09161KM33122Country: United StatesManufacturer: MazdaRegion: North AmericaYears: 2001

I want this:

  • VIN: 4F2YU09161KM33122
  • Country: United States
  • Manufacturer: Mazda
  • Region: North America
  • Years: 2001
Tags:

4

Answers


  1. 0

    Try this, should be work. Read the code, then you will understand your issue.

    var ul = document.getElementById("results");

const variables = [  { label: "VIN", value: result['vin'] },
  { label: "Country", value: result["country"] },
  { label: "Manufacturer", value: result["manufacturer"] },
  { label: "Region", value: result["region"] },
  { label: "Years", value: result["years"] }
];

variables.forEach((variable) => {
  const li = document.createElement("li");
  li.append(document.createTextNode(`${variable.label}: ${variable.value}`));
  ul.append(li);
});
    Login or Signup to reply.
  2. 0

    Your problem is only one li element was created and changed repeatedly in various text nodes. So that’s why you get only one element.
    To solve this create five distinct li elements, each containing a text node.

    var ul = document.getElementById("results");

// Create the 1st li element
const li1 = document.createElement("li");
li1.append(document.createTextNode(vin));
ul.append(li1);

// Create the 2nd li element
const li2 = document.createElement("li");
li2.append(document.createTextNode(country));
ul.append(li2);

// Create the third li element
const li3 = document.createElement("li");
li3.append(document.createTextNode(manuf));
ul.append(li3);

// Create others li...

    Wrap the repeated code in a function and call it again and again…:

    function createLIElement(txt, list) {
  const li = document.createElement("li");
  li.appendChild(document.createTextNode(txt));
  list.appendChild(li);
}

const ul = document.getElementById("results");
createLIElement(vin, ul);
createLIElement(country, ul);
    Login or Signup to reply.
  3. 0

    You have to define a seperate li element for every variable insteadenter code here of adding all the text nodes to the same li element:

    var ul = document.getElementById("results");
const vinLi = document.createElement("li");
const countryLi = document.createElement("li");
const manufLi = document.createElement("li");
const regionLi = document.createElement("li");
const yearsLi = document.createElement("li");
let vin = "VIN: " + result['vin'];
let country = "Country: " + result["country"];
let manuf = "Manufacturer: " + result["manufacturer"];
let region = "Region: " + result["region"];
let years = "Years: " + result["years"];

vinLi.append(document.createTextNode(vin));
ul.append(vinLi)
countryLi.append(document.createTextNode(country));
ul.append(countryLi)
manufLi.append(document.createTextNode(manuf));
ul.append(manufLi)
regionLi.append(document.createTextNode(region));
ul.append(regionLi)
yearsLi.append(document.createTextNode(years));
ul.append(yearsLi)
    Login or Signup to reply.
  4. 0

    You can’t append the same element more than once. It doesn’t exist after the first. However, you can append a clone of it with cloneNode(), passing true to retain text content. Also, you don’t need to create text nodes. Just insert the text.

    const result = {
  vin: '999',
  country: 'Anywhereia',
  manuf: 'Some Company',
  region: 'Over There',
  years: '2005-2044'
};
const ul = document.getElementById("results");
const li = document.createElement("li");
const vin = "VIN: " + result['vin'];
const country = "Country: " + result["country"];
const manuf = "Manufacturer: " + result["manufacturer"];
const region = "Region: " + result["region"];
const years = "Years: " + result["years"];

li.textContent = vin;
ul.append(li.cloneNode(true));
li.textContent = country;
ul.append(li.cloneNode(true));
li.textContent = manuf;
ul.append(li.cloneNode(true));
li.textContent = region;
ul.append(li.cloneNode(true));
li.textContent = years;
ul.append(li.cloneNode(true));
    <ul id="results"></ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search