function createList(arrunique, arrayout) {
    for (i = 0; i < arrayout[0].length; i++) {
        var divIdC = i;
        var divIdT = i + 10;

        $('#tb').append('<select name="bo" style="float:left; width:100px;" id="' + divIdC + '" onchange="getComboVal(this,' + divIdC + ')"></select>');
        $('#tb').append('<input type="text" name = "textBox" style= "width:100px;" id="' + divIdT + '" onkeyup="validate(this,"' + divIdT + '") value="0">');
        var select = document.getElementById(divIdC);
        select.options[select.options.length] = new Option("Select " + arrunique[i][0]);
        for (j = 1; j < arrunique[i].length; j++) {
            select.options[select.options.length] = new Option(arrunique[i][j]);
        };
    };
}

In this code I want to generate a bo box and a textbox and I want to apply some style sheet attribute or any class. How can I do this. Its not working.

function createList(arrunique, arrayout) {
    for (i = 0; i < arrayout[0].length; i++) {
        var divIdC = i;
        var divIdT = i + 10;

        $('#tb').append('<select name="bo" style="float:left; width:100px;" id="' + divIdC + '" onchange="getComboVal(this,' + divIdC + ')"></select>');
        $('#tb').append('<input type="text" name = "textBox" style= "width:100px;" id="' + divIdT + '" onkeyup="validate(this,"' + divIdT + '") value="0">');
        var select = document.getElementById(divIdC);
        select.options[select.options.length] = new Option("Select " + arrunique[i][0]);
        for (j = 1; j < arrunique[i].length; j++) {
            select.options[select.options.length] = new Option(arrunique[i][j]);
        };
    };
}

In this code I want to generate a bo box and a textbox and I want to apply some style sheet attribute or any class. How can I do this. Its not working.

• javascript
• jquery
• html

• 1 Can you be more specific about what's happening? "Not working" doesn't describe the problem – are your elements appearing unstyled, are you getting error messages in the console, etc. – Scott Commented Aug 30, 2013 at 6:56
• Seems to be working fine for me. What's the console output saying? – Mark Erasmus Commented Aug 30, 2013 at 6:59
• @Nav Kumar on which event you are calling this function. createList... :) – Muhammad Saqlain Arif Commented Aug 30, 2013 at 7:00
• Using 'select' as a variable name is not a very good coding practice. And please provide more details as requested by Scottie. – Rohan Sood Commented Aug 30, 2013 at 7:01
• no i have div with width 200 px in this div i want both bo box and text box display on a single row but its appear in a up down so i want on a row and the style tag is not working so how can it works – Nav Kumar Commented Aug 30, 2013 at 7:01

3 Answers 3

There are many, many ways of styling a javascript created element. Here are a few. Click here for live demo.

var myElem = document.createElement('div');
myElem.style.color = '#FFF';

with jQuery:

var $myElem = $('<div></div>');
$myElem.css('color', '#FFF');

or jQuery css object syntax (for passing multiple styles)

$myElem.css({display: 'block', background: '#000'});

Rather than adding the style after creating the element, you may also consider just adding a class to the element after creating it and styling this class in your css file.

CSS file:

.myElem {
  color: #FFF;
}


myElem.className = 'myElem';

or

$myElem.addClass('myElem');

$('#tb').append('<input type="text" class="YOURCLASS" name = "textBox" style= "width:100px;" id="'+divIdT+'" onkeyup="validate(this,"'+divIdT+'") value="0">');

See this simplified jsFiddle. Ensure that the console is not generating an errors, and that you're calling the createList() function.