Czy istnieje jakaś biblioteka, która sprawia, że ​​element create z ciągu jest łatwy?

Question

trzeba utworzyć element z tego ciąg html:

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

Teraz muszę używać:

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

to naprawdę nudne, jest jakaś biblioteka JS, aby to ułatwić?
UWAGA: brak jQuery zadowolić

Answer 1

często oszukują.

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

Answer 2

mogę zaproponować następującą funkcję, jeśli chcesz go w czystym 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; 
    } 

Przykład

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' 

Pozdrawiam :)

Answer 3

użytkowania .innerHTML. Kiedyś nie był standardem, ale teraz jest częścią 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>'; 

Lub jeśli trzeba utworzyć wiele z nich,

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: Dla lepszej wydajności, nie dodajemy do innerHTML; Zamiast budować tablicę ciągów następnie:

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

More info on innerHTML from MDN

Answer 4

Jako rozwiązanie Toma nie będzie działać, jeśli ciąg html składa się z rodzeństwem, chciałbym użyć czegoś takiego:

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/