创建span标签并使用Jquery插入

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

我正在尝试使用jquery填充我要插入到页面中的span标记。

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>

7 个解决方案

#1

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

对象的HTML不是属性，需要单独提供：

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:

另外，className不是有效的属性，你的意思是代替类，如果是这样的话，请使用：

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

#2

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

我更喜欢原生JS的'createElement'方法。这比单独的jQuery方法快

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

#3

Try with:

试试：

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

A jsFiddle

一个jsFiddle

#4

I do not recommend using custom attributes like className, I believe it is standard practice to prefix any needed custom attributes with data-. That being said, you can use the jquery method $.append() to accomplish your goal.

我不建议使用像className这样的自定义属性，我认为标准做法是使用data-为任何所需的自定义属性添加前缀。话虽这么说，你可以使用jquery方法$ .append（）来实现你的目标。

Here is a basic example:

这是一个基本的例子：

var div = $('<div />', { 'className':'folder' })
.append('<span className="folder-name">Elway</span>');

$('body').html(div);

Link to jQuery documentation on append:

链接到追加的jQuery文档：

http://api.jquery.com/append/

#5

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

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

DEMO

DEMO

#6

try to append the html at the end

尝试在最后附加html

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

Suggested By Rory McCrossan

Rory McCrossan建议

if you are using className as your own attribute than change it, inventing your own attributes will render the page invalid and lead to other issues. If you need to create your own attribute use data-*

如果您使用className作为自己的属性而不是更改它，那么创建自己的属性将使页面无效并导致其他问题。如果您需要创建自己的属性使用数据 - *

but if it is class than change it to class

但如果它是类而不是改为类

#7

You can also create an HTML string and attach it to the target element:

您还可以创建HTML字符串并将其附加到目标元素：

var html = '<div class="folder">' +
               '<span class="folder_name">Text</span>' +
           '</div>';

$('body').append(html);

#1