Создать тег span и вставить с помощью JQuery

Я пытаюсь заполнить тег span, который должен был вставить на мою страницу с помощью 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>

Ответ 1

HTML объекта не является атрибутом и должен быть предоставлен отдельно:

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

Кроме того, className не является допустимым атрибутом, вы имеете в виду class вместо этого, если это так использовать:

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

Ответ 2

Я предпочитаю метод createElement собственного JS. Это быстрее, чем только метод jQuery

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

Ответ 3

Попробуйте:

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

A jsFiddle

Ответ 4

Я не рекомендую использовать настраиваемые атрибуты, такие как className, я считаю, что стандартная практика - префикс любых необходимых пользовательских атрибутов с помощью data-. При этом вы можете использовать метод jquery $.append() для достижения своей цели.

Вот пример:

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

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

Ссылка на документацию jQuery на append:

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

Ответ 5

попытайтесь добавить html в конец

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

Предлагается Рори Маккроссан

если вы используете className как свой собственный атрибут, чем изменяете его, придумывание собственных атрибутов сделает страницу недействительной и приведет к другим проблемам. Если вам нужно создать свой собственный атрибут, используйте data-*

но если он является классом, чем изменить его на class

Ответ 6

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

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

DEMO

Ответ 7

Вы также можете создать строку HTML и привязать ее к целевому элементу:

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

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