Calling show() on list-item makes it a block element and makes bullet disappear

Question

I am new to JQuery but I've started by making a list creator essentially. I have an empty list and an input field and a link for the user to add elements to the list. When I add something, I would like it to be hidden at first and then show up dynamically using JQuery. Currently, it adds it to the list but it sets the display: block instead of display:list-item or nothing at all. Am I doing something wrong?

So here is some code

$('a#addstep').click(function() {
    if ( $('#step').val().length > 0 ) {
        $('<li />')
            .text($('#step').val())
            .hide()
            .appendTo('ol#instructions')
            .show('normal');
    }
});

Here is some HTML

<ol id="instructions"></ol>
<input type="text" id="step" size="60" />
<a href="#" id="addstep">Add</a>

Answer 1

try using

(".theclass").css("display", "inline {or your desired value}");

instead of show('normal')

Answer 2

I'm not exactly sure why your adding the extra calls to show/hide. When you add an item it will show it. Please explain further as to why you need to do the show/hide.

If you absolutely have to.

$('a#addstep').click(function() {    
    if ( $('#step').val().length > 0 ) {        
     $('<li />')            
     .text($('#step').val())            
     .hide()            
     .appendTo('ol#instructions')            
     .show('normal', function() {
      $(this).css('display', 'list-item')
     });    
    }
});

Answer 3

Try this (untested):

$('a#addstep').click(function() {
    if ( $('#step').val().length > 0 ) {
        $('<li />')
            .css('display', 'list-item')   // ADDED
            .text($('#step').val())
            .hide()
            .appendTo('ol#instructions')
            .show('normal');
    }
});