创建 span 标签并使用 Jquery 插入

create span tag and insert with Jquery

提问by Frank Visaggio

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>

回答by Rory McCrossan

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, classNameis not a valid attribute, do you mean classinstead, if so use this:

此外，className不是一个有效的属性，你的意思是class，如果是这样，请使用：

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

回答by Martijn

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

回答by Daniele

Try with:

尝试：

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

A jsFiddle

一个jsFiddle

回答by mambrowv

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:

链接到关于append 的jQuery 文档：

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

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

回答by Tushar Gupta - curioustushar

try to append the html at the end

尝试在最后附加 html

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

Suggested By Rory McCrossan

由罗里·麦克罗森推荐

if you are using classNameas 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自己的属性而不是更改它，那么创建自己的属性将使页面无效并导致其他问题。如果您需要创建自己的属性使用data-*

but if it is class than change it to class

但如果它是类而不是将其更改为 class

回答by Anton

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

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

DEMO

演示

回答by Pavlo

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