Question

У меня есть некоторый код, подобный этому:

var glyph = isApple ? '<span class="glyphicon glyphicon-apple"></span>' : '<span class="glyphicon glyphicon-banana"></span>'; 
var newFruit = '<li class="list-group-item">' + glyph + '<span class="badge">' + score + '</span>' + name + '</li>' 
$('#fruitList').append(newFruit); 

Просто много грубой конкатенации, который трудно читать и следовать. Есть ли способ функционально создать эти элементы, и если да, то как? Кроме того, мне любопытно, как это сделать, потому что, если он намного медленнее, чем я, то я просто не буду беспокоиться.

Я ищу что-то подобное, например:

var newElement = li().class("list-group-item").value(name); 
newElement.span().class(isApple ? "glyphicon glyphicon-apple" : "glyphicon glyphicon-user"); 
newElement.span().class('badge').value(score); 
$('#fruitList').append(newElement); 

Теперь, очевидно, выше, не является хорошим или, возможно, даже правильно, но, надеюсь, он получает представление в поперечнике. В основном способ цепочки функций для создания новых элементов, который позволяет избежать беспорядка конкатенаций для создания пользовательского HTML для вставки.

Answer 1

var $li = $("<li/>",{title:"woot"}).addClass("list-group-item").value(name); 
$li.append($("<span/>").addClass(isApple ? "glyphicon glyphicon-apple" : "glyphicon glyphicon-user")); 
$("<span/>").addClass('badge').value(score).appendTo($li); 
$('#fruitList').append($li); 

Answer 2

Что-то вроде этого?

$('<li>', { 
     html: $('<a>', { 
      href: item.href, 
      text: item.title 
     }) 
    }); 

Это ставит a тег внутри тега li. Вы можете изменить это в соответствии с вашими потребностями

Answer 3

Эта структура должна помочь, фокус в том, убедившись, что родительский элемент добавляется перед ребенком:

var newElement = document.createElement('li'); 
$(newElement).addClass('list-group-item'); 
$(newElement).html(name); 

$('#fruitList').append(newElement); 

var newSpan = document.createElement('span'); 
var apple = isApple ? "glyphicon glyphicon-apple" : "glyphicon glyphicon-user"; 
$(newSpan).addClass(apple); 
$(newSpan).addClass('badge'); 
$(newSpan).html(score) 

$(newElement).append(newSpan); 

Answer 4

Вообще говоря, массивы быстрее конкатенации, которая быстрее чем манипулирование DOM.

function getNewItemString(glyph,score,name){ 
    return [ 
     '<li class="list-group-item">', 
     '<span class="glyphicon ', 
     glyph, 
     '"></span>', 
     '<span class="badge">', 
     score, 
     '</span>', 
     name, 
     '</li>' 
    ].join(''); 
} 

$('#fruitList').append(getNewItemString('glyphicon-apple', 20, 'player1')); 
$('#fruitList').append(getNewItemString('glyphicon-banana', 0, 'player2')); 

Answer 5

Существует an overload of the jQuery function, что позволяет сделать создать элемент и определить его свойства. Следующее повторило бы ваш пример:

$('<li>', { 
    class: "list-group-item", 
    html: $('<span>', { 
     class: isApple ? "glyphicon glyphicon-apple" : "glyphicon glyphicon-user" 
    }) 
    .after($('<span>', { 
     class: "badge", 
     text: score 
    })) 
    .after(name) 
});