创建span标记并使用Jquery插入

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');

一个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/