create span tag and insert with Jquery

Question

I am trying to populate a span tag that i was to insert into my page with jquery.

i tried this

var span = $('<span />').attr({'className':'folder_name' , 'text':'favre' });
var insert=
$('<div/>', {
    className: "folder",
    html: span
});

which yielded this result.

<div classname="folder">
<span classname="folder_name" text="favre"></span>
</div>

---

then i tried this

 var span = $('<span />').attr({'className':'folder_name', 'html':'Elway' });

which yielded this

 <div classname="folder">
 <span classname="folder_name" html="Elway"></span>
 </div>

what i am trying to get is below

 <div classname="folder">
 <span classname="folder_name" >**Elway**</span>
 </div>

Answer 1

The HTML of an object is not an attribute and needs to be supplied separately:

var span = $('<span />').attr('className', 'folder_name').html('Elway');

Also, className is not a valid attribute, do you mean class instead, if so use this:

var span = $('<span />').addClass('folder_name').html('Elway');

Answer 2

I prefer the 'createElement' method of native JS. This is faster than the jQuery method alone

var $span = $( document.createElement('span') );
$span.addClass('folder_name').html('Elway');

Answer 3

Try with:

var span = $('<span />').attr('class', 'folder_name').html('Elway');

A jsFiddle