Question

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

我试过这个

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

产生了这个结果。

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

然后我试了这个

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

产生了这个

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

我想要得到的是

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

Answer 1

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

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

另外，className不是有效属性，您的意思是class，如果是，请使用此：

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

Answer 2

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

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

Answer 3

尝试：

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

A jsFiddle

Answer 4

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

以下是一个基本示例：

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

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

链接到附加：

上的jQuery文档

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

Answer 5

尝试在末尾附加html

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

建议人Rory McCrossan

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

但如果是课程，则将其更改为class

Answer 6

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

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

DEMO

Answer 7

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

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

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

创建span标记并使用Jquery插入

7 个答案: