¿Hay alguna biblioteca que haga que crear elementos a partir de cadenas sea fácil?

Question

Necesito crear un elemento de esta cadena HTML:

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

Ahora, tengo que usar:

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

esto es muy aburrido, ¿hay alguna biblioteca de JS para hacer esto más fácil?
NOTA: no jQuery favor

Answer 1

menudo hago trampa.

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

Answer 2

¿Puedo sugerir la siguiente función de si le gustaría que en JavaScript puro

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; 
    } 

Ejemplo

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' 

Saludos :)

Answer 3

Uso .innerHTML. Solía ​​no ser un estándar, pero ahora es parte de 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>'; 

O si es necesario crear muchos de ellos,

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>'; 

Editar: Para un mejor rendimiento, no seguir añadiendo a la innerHTML; En su lugar, construir una matriz de cadenas a continuación:

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

More info on innerHTML from MDN

Answer 4

Como solución de Tom no funcionará si la cadena HTML consta de hermanos, que haría uso de algo como esto:

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>') 
); 

Demostración: http://jsfiddle.net/zSfdR/