Есть ли лучшая практика для создания html с помощью javascript

Если вам абсолютно необходимо объединить строки, вместо обычного :

var s="";
for (var i=0; i < 200; ++i) {s += "testing"; }

использовать временный массив:

var s=[];
for (var i=0; i < 200; ++i) { s.push("testing"); }
s = s.join("");

использование массивов намного быстрее, особенно в IE. Я сделал некоторое тестирование со строками некоторое время назад с IE7, Opera и FF. Opera потребовалось всего 0,4 С, чтобы выполнить тест, но IE7 не закончил через 20 минут !!!! ( Нет, я не шучу. ) С массивом IE было очень быстро.

один из первых двух вариантов является нормальным и приемлемым.

я приведу примеры каждого из них в прототип.

// assuming JSON looks like this:
// { 'src': 'foo/bar.jpg', 'name': 'Lorem ipsum' }

подход #1:

var html = "<div><img src='#{src}' /> #{name}</div>".interpolate(json);
$('container').insert(html); // inserts at bottom

подход #2:

var div = new Element('div');
div.insert( new Element('img', { src: json.src }) );
div.insert(" " + json.name);
$('container').insert(div); // inserts at bottom

вот пример, используя мой Простые Шаблоны плагин для jQuery:

var tmpl = '<div class="#{classname}">#{content}</div>';
var vals = {
    classname : 'my-class',
    content   : 'This is my content.'
};
var html = $.tmpl(tmpl, vals);

возможно, более современный подход заключается в использовании языка шаблонов, таких как ус, который имеет реализации на многих языках, включая JavaScript. Например:

var view = {
  url: "/hello",
  name: function () {
    return 'Jo' + 'hn';
  }
};

var output = Mustache.render('<div><img src="{{url}}" />{{name}}</div>', view);

вы даже получите дополнительное преимущество - вы можете использовать те же шаблоны в других местах, таких как на стороне сервера.

Если вам нужны более сложные шаблоны (если операторы, циклы, и т. д.), вы можете использовать руль который имеет больше возможностей, и совместим с Усы.

вы можете добавить шаблон HTML на свою страницу в скрытом div, а затем использовать cloneNode и средства запроса вашей любимой библиотеки для его заполнения

/* CSS */
.template {display:none;}

<!--HTML-->
<div class="template">
  <div class="container">
    <h1></h1>
    <img src="" alt="" />
  </div>
</div>

/*Javascript (using Prototype)*/
var copy = $$(".template .container")[0].cloneNode(true);
myElement.appendChild(copy);
$(copy).select("h1").each(function(e) {/*do stuff to h1*/})
$(copy).select("img").each(function(e) {/*do stuff to img*/})

раскрытие: я сопровождающий Боба.

есть библиотека JavaScript, которая делает этот процесс намного проще называют Боб.

для вашего конкретного примера:

<div><img src="the url" />the name</div>

это может быть сгенерировано с Бобом следующим кодом.

new BOB("div").insert("img",{"src":"the url"}).up().content("the name").toString()
//=> "<div><img src="the url" />the name</div>"

или с более короткий синтаксис

new BOB("div").i("img",{"src":"the url"}).up().co("the name").s()
//=> "<div><img src="the url" />the name</div>"

эта библиотека довольно мощная и может быть использована для создания очень сложных структур с вставкой данных (аналогично d3), например.:

data = [1,2,3,4,5,6,7]
new BOB("div").i("ul#count").do(data).i("li.number").co(BOB.d).up().up().a("a",{"href": "www.google.com"}).s()
//=> "<div><ul id="count"><li class="number">1</li><li class="number">2</li><li class="number">3</li><li class="number">4</li><li class="number">5</li><li class="number">6</li><li class="number">7</li></ul></div><a href="www.google.com"></a>"

BOB в настоящее время не поддерживает ввод данных в DOM. Это на данное приложение. На данный момент Вы можете просто использовать вывод вместе с обычным JS или jQuery и поместить его туда, куда вы хотите.

document.getElementById("parent").innerHTML = new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s();
//Or jquery:
$("#parent").append(new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s());

---

Я сделал эту библиотеку, потому что я не был доволен любой из альтернатив, таких как jquery и d3. Код очень сложный и трудно читаемый. Работа с Бобом, на мой взгляд, что очевидно предвзято, намного больше приятный.

Боб доступен на беседке, так что вы можете сделать это, запустив bower install BOB.

есть ли лучшая практика для этого? Я вижу несколько способов сделать это:

1. конкатенации строк
2. создать элементы
3. используйте шаблон плагин
4. сгенерируйте html на сервере, а затем подавайте через JSON.

1) это вариант. Создайте html с JavaScript на стороне клиента, а затем вставьте его в DOM в целом.

обратите внимание, что за этим подходом стоит парадигма: сервер выводит только данные и (в случае взаимодействия) получает данные от клиента asyncronoulsy с AJAX-запросами. Код на стороне клиента работает как автономное веб-приложение JavaScript.

веб-приложение может работать, отображать интерфейс, даже без сервера (конечно, он не будет отображать какие-либо данные или предлагать какое-либо взаимодействие).

эта парадигма в последнее время часто принимается, и вся рамки строятся вокруг этого подхода (см. backbone.js например).

2) по соображениям производительности, когда это возможно, лучше построить html в строку, а затем ввести его в целом на страницу.

3) это еще один вариант, а также принятие структуры веб-приложения. Другие пользователи опубликовали различные доступные механизмы шаблонов. У меня складывается впечатление, что у вас есть навыки, чтобы оценить их и решить, стоит ли идти по этому пути или нет.

4) другой вариант. Но подавайте его как простой текст / html; почему JSON? Мне не нравится этот подход, потому что смешивает PHP (ваш серверный язык) с Html. Но я часто принимаю его как разумный компромисс между вариантом 1 и 4.

---

мой ответ: вы уже смотрите в правильном направлении.

Я предлагаю принять подход между 1 и 4 как и я. В противном случае используйте веб-фреймворк или механизм шаблонов.

просто мое мнение, основанное на моем опыте...