Генерация HTML в коде JS

Question

Я хотел бы узнать ваши мысли о генерации кода HTML в моем JS-коде.

Я просто считаю, что стиль html.push("<tag>" + something + "</tag>") довольно раздражает. Я уже пробовал что-то с шаблонами внутри моего HTML-файла (и помещал в него некоторые заполнители), а затем использовал свой контент для замены заполнителей на мои реальные значения.

Но, возможно, у вас есть другие идеи, возможно, с использованием jQuery.

Answer 1

jQuery имеет плагины шаблона javascript, такие как jBind и jTemplate. Я сам их не использовал, но по возможности рекомендую jQuery.

Замечание о генерации html, оно не доступно поисковой системе в большинстве случаев.

Answer 2

Вы можете использовать createelement, appendchild и innerHTML для этого.

Здесь an article from A List Apart, который использует эти функции в процессе создания выпадающего меню.

Answer 3

jQuery - это путь. Вы можете сделать что-то вроде этого:

// create some HTML 
var mySpan = $("<span/>").append("Something").addClass("highlight"); 

• это кросс-браузерный,
• это простой в использовании синтаксиса

Существует также templating plugin.

Answer 4

Я большой поклонник как PrototypeJS ручками templates.

Сначала вы создаете экземпляр класса Template и передаете ему строку, содержащую шаблон HTML.

var tpl = new Template('Here is a link to <a href="#{link}">#{sitename}</a>'); 

Затем вы передаете ему данные, содержащие значения для замены в шаблоне.

$('someDiv').innerHTML = tpl.evaluate({link: 'http://www.stackoverflow.com', sitename: 'StackOverflow'}); 

В приведенном выше примере, у меня есть DIV с идентификатором = «someDiv» и я заменить содержимое DIV с результатом оценки шаблона.

Answer 5

Есть куча функции JQuery, которая поддерживает это. В частности, вы должны смотреть на append(content), appendTo(content)prepend(content)prependTo(content), replaceWith(content), after(content), before(content), insertAfter(content) и insertBefore(content).

Answer 6

У Resig есть немного blog entry на создание очень легкой системы шаблонов.