How to create these element by using loop in JavaScript

Question

I want to add some items into the ul using JavaScript. Right now I am using createTextNode and createElement. Is there anyway to add this items using loop, to make code much shorter?

const ul = document.querySelector('ul');
        const listFeelTemp = document.createElement('li');
        const listTempMin = document.createElement('li');
        const listTempMax = document.createElement('li');
        const listPressure = document.createElement('li');
        const listHumidity = document.createElement('li');

        listFeelTemp.appendChild(document.createTextNode(`Feeeling temp is ${resFeelsTemp}°C`))
        listTempMin.appendChild(document.createTextNode(`Min ${resTempMin}°C`))
        listTempMax.appendChild(document.createTextNode(`Max ${resTempMax}°C`))
        listPressure.appendChild(document.createTextNode(`Pressure ${resPressure}HPa`))
        listHumidity.appendChild(document.createTextNode(`Humidity ${resHumidity}%`))

        ul.appendChild(listFeelTemp);
        ul.appendChild(listTempMin);
        ul.appendChild(listTempMax);
        ul.appendChild(listPressure);
        ul.appendChild(listHumidity);

You'd probably need an array containing all the unique attributes of each field. Then loop over the array. — mykaf
– mykaf, Commented May 6, 2021 at 15:04

Terry · Accepted Answer · 2021-05-06 15:05:24Z

So the only changing thing in your code is the text: a good start will be to store those texts in an array.

Then, you can create a function that abstracts away all the logic in creating the <li> element and inserting it to the <ul> element. This is basically the concept of DRY: instead of repeating the same commands over and over again, abstract that logic into a function and call it iteratively.

Finally, loop through your array and invoke the function:

const ul = document.querySelector('ul');

// Abstract element & text node creation to a function
function createAndAppendListItem(text) {
    const el = document.createElement('li');
    el.appendChild(document.createTextNode(text);
    ul.appendChild(el);
}

const texts = [
    `Feeeling temp is ${resFeelsTemp}°C`,
    `Min ${resTempMin}°C`,
    `Max ${resTempMax}°C`,
    `Pressure ${resPressure}HPa`,
    `Humidity ${resHumidity}%`
]

texts.forEach(text => createAndAppendListItem(text));

Of course, if your data structure is going to be more complicated, then considering storing data in the form of an array of objects instead of an array of strings.

Udendu Abasili · Accepted Answer · 2021-05-06 15:07:47Z

0

You can do this simple method

const array = [`Feeeling temp is ${resFeelsTemp}°C`, `Min ${resTempMin}°C`, `Max ${resTempMax}°C`, `Pressure ${resPressure}HPa`, `Humidity ${resHumidity}%` ]

const ul = document.querySelector('ul');
array.forEach((value) =>{
  const li = document.createElement('li');
  li.innerText = value
  ul.appendChild(li)
})

answered May 6, 2021 at 15:07

Udendu Abasili

1,2232 gold badges16 silver badges31 bronze badges

1 Comment

TheRobertos Over a year ago

This is exactly solution that i tried to develop. Thanks

scovic · Accepted Answer · 2021-05-06 15:11:40Z

0

How about this?

    const textValues = [
      `Feeeling temp is ${resFeelsTemp}°C`,
      `Min ${resTempMin}°C`,
      `Max ${resTempMax}°C`,
      `Pressure ${resPressure}HPa`,
      `Humidity ${resHumidity}%`
    ];
    
    const ul = document.querySelector('ul');

    for (const textValue of textValues) {
      const li = document.createElement('li');
      li.appendChild(document.createTextNode(textValue));
      ul.appendChild(li);
    }

answered May 6, 2021 at 15:11

scovic

3932 silver badges8 bronze badges

Comments

Ran Turner · Accepted Answer · 2021-05-06 15:15:19Z

0

I would make a dedicated function which creates the element and append it to the ul.

Another suggestion is to keep an array of template literals which holds the string templates and replace it with your hard coded temperature numbers.

const ul = document.createElement('ul');

const resFeelsTemp = 10;
const resTempMin = 12;
const resPressure = 13;
const resHumidity = 10;

const addUlToLi = (text) => {
     const li = document.createElement('li');
     li.appendChild(document.createTextNode(text));
     ul.appendChild(li);
}

const arr =[`Feeeling temp is ${resFeelsTemp}° C`, `Min ${resTempMin}°C`, `Pressure ${resPressure}HPa`, `Humidity ${resHumidity}%`];

arr.forEach(el => addUlToLi(el));

answered May 6, 2021 at 15:15

Ran Turner

18.7k9 gold badges60 silver badges60 bronze badges

Comments

KooiInc · Accepted Answer · 2021-05-06 15:39:20Z

0

For the record: you can also use insertAdjacentHTML to create the elements

const ul = document.querySelector('ul');
const [feel, min, max, press, hum] = [22, 11, 25, 97.88, 45];
[`Feeling temp is ${feel}°C`,
 `Min ${min}°C`,
 `Max ${max}°C`,
 `Pressure ${press}HPa`,
 `Humidity ${hum}%`]
.forEach(txt => ul.insertAdjacentHTML("beforeend", `<li>${txt}</li>`));

<ul></ul>

answered May 6, 2021 at 15:39

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Collectives™ on Stack Overflow

How to create these element by using loop in JavaScript

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related