jquery - 创建跨度标签并使用 Jquery 插入

Question

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

我试过这个

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/

Answer 5

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

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

演示

Answer 6

尝试在最后附加 html

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

由Rory McCrossan推荐

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

但如果它是类而不是改变它class

Answer 7

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

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

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

Answer 8

var customSpan = document.createElement('span');
customSpan.classList.add("notActive");