What is the method for incorporating multiple classes into an li element?

Here is the code I am working with:

function createCardList(classname, cardName) {
    console.log(classname);
    var $li = $('<li class=' + classname + '>');
    var $input = $('<input >', { type: 'radio', name: 'test'});
    var $label = $("<label for='test'>").text(testName);
    $li.append($input);
    $li.append($label);
    $("#card-obj").append($li);
}


for(var i=0; i<= 9; i++) {
    if(i%2 == 0) {
        createCardList("borderR borderB", "AAAAA");
    }
    else {
        createCardList("borderB", "BBBBB");
    }
}

When the condition in the if statement is true, the list item should look like this:

<li class="borderR borderB">

However, the current output looks like this:

<li class="borderR" borderb><li>

How can I correct this issue?

Answer №1

modify

let $li = $('<li class=' + nameOfClass + '>');

into

let $li = $('<li class="' + nameOfClass + '">');

Answer №2

To achieve the desired outcome, you can generate the element in this manner:

const $element = $('<div />', { "class": cssClass });

Answer №3

Here are some additional options to consider:

let $listItem = $('<li>');
$listItem.addClass(className);

You can also achieve the same result by utilizing the attr method:

$('<li>').attr("class", className);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML5 number input type formats long numbers differently

In my application, users are required to enter a minimum of 15 digits in a number input field. However, if a user enters a longer number, for example, equal to or greater than 19 digits, and then uses the arrow buttons or keyboard keys, the number is auto ...

Guide to displaying a loading progress bar within a div using JQuery

With the help of jQuery's Load function, I am able to load another page into a specific div by calling jQuery.Load("#divid","pageURL"). Whenever I click on an anchor tag within the loaded page, it triggers the jQuery.load("#divid","pageURL") function ...

Error: Failed to interpret JSON data using index

I'm having some difficulties parsing a JSON file {"prices": {"XRP/ETH": "0.0011228", "LTC/XRP": "187.7162", "BCH/INR": "53200.000", "LTC/BCH": "0.0729828", "LTC/BTC": "0.01567781", "LTC/ETH": "0.1948464", "XRP/BTC": "0.00006908", "BCH/ETH": "1.693076 ...

Using Jquery to ensure that the Ajax call finishes before proceeding

I have created a jQuery script to transfer files from one FTP server to another. It currently moves all files at once, but I would like the files to be moved one by one without locking up the browser with "async=false". <script> var files = [ ...

What is the process of extracting data from JavaScript output using Mongoose?

Currently facing an issue with mongoose while working on a blog website and integrating quilljs. The problem arises from the output file in my JavaScript file that contains the configurations for my quill editor. var quill = new Quill('#editor&ap ...

Switching from tables to using list items (li) in a shopping list can greatly enhance the

I have been using a program to create a shopping list with item names and prices using Tables. However, I now need to convert everything to lists in order to utilize appendChild() and createElement(). How can I accomplish this change in JavaScript? let ...

Why does the border-radius property not work on my image elements?

Greetings! I have defined an ID named #img in my stylesheet with the property border-radius: 15px; In my HTML, I assigned this ID to a div. However, the images within that div are not getting rounded corners as expected. When using the img selector, it aff ...

Encountering Internal Server Error when running Node-Express app on render.com with query parameters live

Currently, I am facing an issue while attempting to execute a live route with query using my nodejs express application on render.com. Strangely, all other routes connected to the crud operations are functioning properly except for the search filter route ...

The Jquery function for selecting a div added by an Ajax call is not functioning properly, but it works fine without the need for an

I have a unique checkbox that I created using an Ajax call. The issue I'm facing is that the jQuery to select the checked input in the second div #test_checkbox_ajax isn't working, while it works perfectly fine in the first div #test_checkbox. Cr ...

Ways to maximize the output from the octokit api

I am trying to fetch all the repositories from GitHub using the Octokit library. To achieve this, I have incorporated the throttling, paginateRest, and restEndpointMethods plugins. However, regardless of my search query, I am only receiving a maximum of ...

Successfully received response from Ajax post - unable to display on screen

After successfully posting data to the server using $.post(), I am encountering issues when trying to work with the response. Unfortunately, nothing appears - no console log is shown and I am unable to replace text or HTML with the retrieved data. Below i ...

The HTML5 range input is consistently defaulting to the minimum value and is not triggering the onChange event for text input

My goal is to implement a feature where an input type text is used along with an input type range with three specific use cases: 1. Default case: When the page loads, the slider should point to the value specified in the text input field. 2. When a user e ...

The 'download' attribute on HTML elements unexpectedly redirects to a new page instead of initiating a download

Trying to create a download button for an image with the code below: <a href="https://media.npr.org/assets/img/2017/09/14/gettyimages-10141026_slide-67be9fc1bca330b26debade87690b5e84286614d-s800-c85.jpg" class="btn btn-outline-success btn-sm" targe ...

The setInterval function does not function properly in IE8 when set to 0

I have a function called changeColor that updates the styling of certain elements in my HTML. In order to apply this function, I am using a timer like so: var timer = setInterval(changeColor,0); The issue I am encountering is that setting the time interv ...

Utilizing additional JavaScript libraries with custom Power BI visuals

Seeking clarification on how to use the d3 library within my visual.ts file. I have installed it using npm and added it to the externalJS section of pbiviz.json, but I am unsure of any additional configurations needed to successfully include and utilize it ...

Sending a form using an AngularJS dropdown menu

I have recently started using angularjs and decided to switch out a traditional html <select> box for an angular modal select box. The select box successfully populates with data from a $http ajax request, but I am facing issues with form submission ...

Display a floating label above the text input when it is focused or when it holds text

I am trying to create an animated search bar where the label moves from being over the text input to above it. I came across a helpful example in a fireship.io video, which includes the CSS and HTML code available here The example I found demonstrates the ...

Tips for crafting a successful form success message within a bootstrap modal

RESOLVED After a long struggle, I finally managed to solve the issue using AJAX. However, in order to make it work, I had to remove WordPress and plan on re-uploading it in a separate directory later. Thankfully, this workaround does not affect my index p ...

Is it possible to obtain user information by utilizing their image?

Is there a way to find user information using their image? For example, if I have an image of a person, can I retrieve their information from social sites like Google+, Facebook, and others? ...

Is there a way to export a variable that has been declared within a function component in React Js?

I am currently developing a React app and I need to export the RoomPricelist1 & FacilityPricelist1 variables. I have assigned values to these variables within a function component but when I try to import them into another function component, they are sh ...