Есть ли библиотека, которая делает создание элемента из строки легко?

Question

Мне нужно создать элемент из этой HTML-строки:

<li class="station_li">
    <span class="seq_num"></span>
    <a href="javascript:void(0);" class="remove_li_link">delete</a>
</li>  

Теперь я должен использовать:

var li = document.createElement("li");  
li.className = "station_li";  
var span = document.createElement("span");  
span.className............  
............  

это действительно скучно, есть ли библиотека js, чтобы сделать это проще?
ПРИМЕЧАНИЕ: нет JQuery, пожалуйста

Answer 1

Я часто обманываю.

function createElmt(html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    return div.childNodes[0];
}

Answer 2

Поскольку решение Тома не будет работать, если строка html состоит из братьев и сестер, я бы использовал что-то вроде этого:

function createElmt(htmlStr) {
  var
    helper = document.createElement('div'),
    result = document.createDocumentFragment(),
    i = 0, num;

  helper.innerHTML = htmlStr;

  for (num = helper.childNodes.length; i < num; i += 1) {
    result.appendChild(helper.childNodes[i].cloneNode(true))
  }

  return result;
}

// test
document.getElementsByTagName('body')[0].appendChild(
  createElmt('<span>1</span> text-node <span>2</span><span>3</span>')
);

Демо: http://jsfiddle.net/zSfdR/

Answer 3

Используйте .innerHTML . Раньше он не был стандартом, но теперь является частью HTML5.

var li = document.createElement('li');
li.className = "station_li";
li.innerHTML = '<span class="seq_num"></span>\
  <a href="javascript:void(0);" class="remove_li_link">delete</a>';

Или, если вам нужно создать много из них,

var ul = document.createElement('ul');
// repeat as necessary:
ul.innerHTML += '<li class="station_li">\
    <span class="seq_num"></span>\
    <a href="javascript:void(0);" class="remove_li_link">delete</a>\
    </li>';

Редактировать: для повышения производительности не продолжайте добавлять к innerHTML; вместо этого создайте массив строк:

ul.innerHTML = arrayOfFragments.join('');

Подробнее о innerHTML от MDN

Answer 4

Могу ли я предложить следующую функцию, если вы хотите ее в чистом javascript

  function addChild(parent,tn,attrs)
   {
     var e = document.createElement(tn);
      if(attrs)
        {
         for(var attr in attrs)
            {
             e.setAttribute(attr,attrs[attr]);
            }
        }
    parent.appendChild(e);
    return e;
   }

Пример

var li =    addChild(document.getElementById('ul tag id'),'li',{"class" : 'station_li'});
var span =  addChild(li,'span',{"class" : 'seq_num'});
var a =     addChild(li,'a',{ href:"javascript:void(0);" , "class":"remove_li_link"});
a.innerHTML = 'some thing'

С уважением:)