What is the best method for including an HTML class within a JavaScript for loop?

Question

What is the best method for including an HTML class within a JavaScript for loop?

Looking for a solution to add a class while iterating through an array? Check out the code snippet below:

var users = [{
    name: "Jan",
    id: "1",
    number: "111-111-111"
  },
  {
    name: "Juan",
    id: "2",
    number: "222-222-222"
  },
  {
    name: "Margie",
    id: "3",
    number: "333-333-333"
  },
  {
    name: "Sara",
    id: "4",
    number: "444-444-444"
  },
  {
    name: "Tyrell",
    id: "5",
    number: "555-555-555"
  },
];

var div = "<div>";
for (var i = 0; i < users.length; i++) {
  div += "<p class='user-item'>" + users[i].name + "</p>";
  div += "<p class='user-item'>" + users[i].id + "</p>";
  div += "<p class='user-item'>" + users[i].number + "</p>";
}
div += "</div>";
document.getElementById("usersList").innerHTML = div;

<div class="contact-container">
  <div class="navbar">
    <ul>
      <li>
        <img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png" />
      </li>
      <li>
        <a href="#">View</a>
      </li>
      <li>
        <a href="#">Add</a>
      </li>
      ...
    </ul>
  </div>
  <div class="users" id="usersList">

  </div>

Looking to include a class during iteration? Here's a way to achieve that!

javascript html css

Answer 1

Answer №1

Is there a specific reason for not adding a class within the loop like so?

for (let i = 0; i < users.length; i++) {
  div += "<p class='myclass'>" + users[i].name + "</p>";
  div += "<p class='myclass'>" + users[i].id + "</p>";
  div += "<p class='myclass'>" + users[i].number + "</p>";
}

Answer 2

Is there a specific reason for not adding a class within the loop like so?

for (let i = 0; i < users.length; i++) {
  div += "<p class='myclass'>" + users[i].name + "</p>";
  div += "<p class='myclass'>" + users[i].id + "</p>";
  div += "<p class='myclass'>" + users[i].number + "</p>";
}

Answer 3

Answer №2

Simply insert this code snippet into your HTML file

for (var i = 0; i < users.length; i++) {
  div += "<p class='user-name'>" + users[i].name + "</p>";
  div += "<p class='user-id'>" + users[i].id + "</p>";
  div += "<p class='user-number'>" + users[i].number + "</p>";
}

var users = [{
    name: "Jan",
    id: "1",
    number: "111-111-111"
  },
  {
    name: "Juan",
    id: "2",
    number: "222-222-222"
  },
  {
    name: "Margie",
    id: "3",
    number: "333-333-333"
  },
  {
    name: "Sara",
    id: "4",
    number: "444-444-444"
  },
  {
    name: "Tyrell",
    id: "5",
    number: "555-555-555"
  },
];

var div = "<div>";
for (var i = 0; i < users.length; i++) {
  div += "<p class='user-name'>" + users[i].name + "</p>";
  div += "<p class='user-id'>" + users[i].id + "</p>";
  div += "<p class='user-number'>" + users[i].number + "</p>";
}
div += "</div>";
document.getElementById("usersList").innerHTML = div;

.user-name {
  color: red;
}

.user-id {
  color: blue;
}

.user-number {
  color: green;
}

<div class="contact-container">
  <div class="navbar">
    <ul>
      <li>
        <img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png" />
      </li>
      <li>
        <a href="#">View</a>
      </li>
      <li>
        <a href="#">Add</a>
      </li>
      ...
    </ul>
  </div>
  <div class="users" id="usersList">

  </div>

Answer 4

Simply insert this code snippet into your HTML file

for (var i = 0; i < users.length; i++) {
  div += "<p class='user-name'>" + users[i].name + "</p>";
  div += "<p class='user-id'>" + users[i].id + "</p>";
  div += "<p class='user-number'>" + users[i].number + "</p>";
}

var users = [{
    name: "Jan",
    id: "1",
    number: "111-111-111"
  },
  {
    name: "Juan",
    id: "2",
    number: "222-222-222"
  },
  {
    name: "Margie",
    id: "3",
    number: "333-333-333"
  },
  {
    name: "Sara",
    id: "4",
    number: "444-444-444"
  },
  {
    name: "Tyrell",
    id: "5",
    number: "555-555-555"
  },
];

var div = "<div>";
for (var i = 0; i < users.length; i++) {
  div += "<p class='user-name'>" + users[i].name + "</p>";
  div += "<p class='user-id'>" + users[i].id + "</p>";
  div += "<p class='user-number'>" + users[i].number + "</p>";
}
div += "</div>";
document.getElementById("usersList").innerHTML = div;

.user-name {
  color: red;
}

.user-id {
  color: blue;
}

.user-number {
  color: green;
}

<div class="contact-container">
  <div class="navbar">
    <ul>
      <li>
        <img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png" />
      </li>
      <li>
        <a href="#">View</a>
      </li>
      <li>
        <a href="#">Add</a>
      </li>
      ...
    </ul>
  </div>
  <div class="users" id="usersList">

  </div>

Answer 5

Answer №3

If you want to enhance your code structure, consider constructing your elements in the following manner:

const newDiv = document.createElement("div");
const newP = document.createElement("p");

Next, assign a class name to the paragraph element:

newP.className = "css-style";

Then, append the child elements to their respective parent elements:

newDiv.appendChild(newP);
document.getElementById("userContainer").appendChild(newDiv);

This method is more organized and effective compared to using innerHTML for adding elements.

Answer 6

If you want to enhance your code structure, consider constructing your elements in the following manner:

const newDiv = document.createElement("div");
const newP = document.createElement("p");

Next, assign a class name to the paragraph element:

newP.className = "css-style";

Then, append the child elements to their respective parent elements:

newDiv.appendChild(newP);
document.getElementById("userContainer").appendChild(newDiv);

This method is more organized and effective compared to using innerHTML for adding elements.

Answer 7

Answer №4

Even though there is already an accepted answer, I believe this presents a great opportunity to delve into the realm of custom elements for both personal learning and potentially contributing more insights.

Below is the code snippet along with explanatory comments. While it might seem like dark magic to me currently, I am intrigued by the challenge and eager to formulate a comprehensive response:

// Creating a custom element called 'user-card' that will be rendered as <user-card> in the DOM:
customElements.define('user-card',
  class extends HTMLElement {
    constructor() {
      super();
      // Accessing the <template> element using its id and getting its content:
      let template = document.getElementById('user-card');
      let templateContent = template.content;

      // Attaching shadow root and allowing JavaScript modifications:
      const shadowRoot = this.attachShadow({
          mode: 'open'
        })
        .appendChild(templateContent.cloneNode(true));
    }
  }
);

// Data definition:
let users = [{
      name: "Jan",
      id: "1",
      number: "111-111-111"
    },
    {
      name: "Juan",
      id: "2",
      number: "222-222-222"
    },
    {
      name: "Margie",
      id: "3",
      number: "333-333-333"
    },
    {
      name: "Sara",
      id: "4",
      number: "444-444-444"
    },
    {
      name: "Tyrell",
      id: "5",
      number: "555-555-555"
    },
  ],
  userDiv = document.querySelector('#usersList');

// Iterating through the data array using Array.prototype.forEach():
users.forEach(
  (user) => {
    // Creating a new <user-card> and <li> element:
    let card = document.createElement('user-card'),
      li = document.createElement('li'),
      fragment = document.createDocumentFragment();

    // Iterating over Object keys and assigning each key-value pair to a separate div element:
    Object.keys(user).forEach(
      (key) => {
        let clone = li.cloneNode();

        clone.classList.add(key);

        clone.style.setProperty('grid-area', key);

        clone.textContent = user[key];

        fragment.append(clone);
      })

    card.append(fragment);
    userDiv.append(card);
  });

/* Basic CSS reset */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font-size: 1rem;
  font-family: Calibri, Helvetica, Ubuntu, Arial, sans-serif;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

.users {
  /* Using Grid display for cards layout */
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  margin: 1em auto;
  max-width: 90vw;
}

<template id="user-card">
<style>
  ol {
    border: 1px solid #ccc;
     list-style-type: none;
     display: grid;
     gap: 0.5em;
     grid-template-areas:
       "id name name"
       "number number number";
     padding: 0.25em;
     margin: 0;
  }
</style>
  <ol>
    <slot></slot>
  </ol>
</template>
<div class="contact-container">
  <div class="users" id="usersList"></div>
</div>

Check out the JS Fiddle demo.

Suggested Readings:

Understanding how to pass option tags to a custom element as distributed nodes (aka <slot></slot>).
"Leveraging Templates and Slots," MDN.
"Demystifying Web Components," CSS-Tricks.

Answer 8

Even though there is already an accepted answer, I believe this presents a great opportunity to delve into the realm of custom elements for both personal learning and potentially contributing more insights.

Below is the code snippet along with explanatory comments. While it might seem like dark magic to me currently, I am intrigued by the challenge and eager to formulate a comprehensive response:

// Creating a custom element called 'user-card' that will be rendered as <user-card> in the DOM:
customElements.define('user-card',
  class extends HTMLElement {
    constructor() {
      super();
      // Accessing the <template> element using its id and getting its content:
      let template = document.getElementById('user-card');
      let templateContent = template.content;

      // Attaching shadow root and allowing JavaScript modifications:
      const shadowRoot = this.attachShadow({
          mode: 'open'
        })
        .appendChild(templateContent.cloneNode(true));
    }
  }
);

// Data definition:
let users = [{
      name: "Jan",
      id: "1",
      number: "111-111-111"
    },
    {
      name: "Juan",
      id: "2",
      number: "222-222-222"
    },
    {
      name: "Margie",
      id: "3",
      number: "333-333-333"
    },
    {
      name: "Sara",
      id: "4",
      number: "444-444-444"
    },
    {
      name: "Tyrell",
      id: "5",
      number: "555-555-555"
    },
  ],
  userDiv = document.querySelector('#usersList');

// Iterating through the data array using Array.prototype.forEach():
users.forEach(
  (user) => {
    // Creating a new <user-card> and <li> element:
    let card = document.createElement('user-card'),
      li = document.createElement('li'),
      fragment = document.createDocumentFragment();

    // Iterating over Object keys and assigning each key-value pair to a separate div element:
    Object.keys(user).forEach(
      (key) => {
        let clone = li.cloneNode();

        clone.classList.add(key);

        clone.style.setProperty('grid-area', key);

        clone.textContent = user[key];

        fragment.append(clone);
      })

    card.append(fragment);
    userDiv.append(card);
  });

/* Basic CSS reset */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font-size: 1rem;
  font-family: Calibri, Helvetica, Ubuntu, Arial, sans-serif;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

.users {
  /* Using Grid display for cards layout */
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  margin: 1em auto;
  max-width: 90vw;
}

<template id="user-card">
<style>
  ol {
    border: 1px solid #ccc;
     list-style-type: none;
     display: grid;
     gap: 0.5em;
     grid-template-areas:
       "id name name"
       "number number number";
     padding: 0.25em;
     margin: 0;
  }
</style>
  <ol>
    <slot></slot>
  </ol>
</template>
<div class="contact-container">
  <div class="users" id="usersList"></div>
</div>

Check out the JS Fiddle demo.

What is the best method for including an HTML class within a JavaScript for loop?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Current polyfill available for requestAnimationFrame

What is the best way to create grid designs using less in bootstrap?

The functionality of hover and custom attribute is not operational on IE8

How can the value be accessed when using getElementById in Angular for <mat-select> elements that do not have a value attribute?

How ASP.net can dynamically generate URLs in external CSS files

Network plot search box

What is the method for adding a clickable link to an HTML tag in a shiny application?

Troubleshooting: Bootstrap 4 Navbar Not Collapsing

Displaying angular ng-messages only when the field has been touched

NPM: Handling multiple prehooks with the same name

Can a single page be used to send email?

Create and adapt dynamic tiles to fit within the available width

Having trouble making the jQuery "simulate width: calc(100%)" function work properly?

The $route object in vue-router appears to be empty when used with single file components

Function compilation did not succeed in the module

How to Use Jquery to Deactivate a Div with a Background Color

Unlocking the Power of Session Variables in AngularJS using Ui-router

Achieving fixed width and automatic height for images in Next JS: a guide

Building personalized error messages using graphql-js and express

How can I display a customized component on a table based on the data object's value?