C'è qualche libreria che rende facile creare elementi dalla stringa?

Question

Ho bisogno di creare un elemento da questa stringa html:

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

Ora, devo usare:

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

questo è davvero noioso, c'è qualche libreria js per rendere questo più facile?
NOTA: non jQuery compiacere

Answer 1

spesso barare.

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

Answer 2

posso suggerire la seguente funzione se si desidera che in puro 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; 
    } 

Esempio

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' 

Saluti :)

Answer 3

Usa .innerHTML. Non era uno standard, ma ora fa parte di 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>'; 

Oppure, se avete bisogno di creare molti di loro,

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

Edit: Per migliorare le prestazioni, non continuare ad aggiungere alla innerHTML; invece, costruire un array di stringhe, allora:

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

More info on innerHTML from MDN

Answer 4

Come soluzione di Tom non funziona se la stringa HTML è costituito da fratelli e sorelle, mi piacerebbe usare qualcosa di simile:

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

Demo: http://jsfiddle.net/zSfdR/