string에서 create 요소를 쉽게 만드는 라이브러리가 있습니까?

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 라이브러리는 무엇입니까?
참고 : 순수 자바 스크립트

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' 

감사합니다 :)

Answer 1

.

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

Answer 2

난 다음 함수를 제안 할 수 기쁘게하지 않습니다. 이전에는 표준이 아니었지만 이제는 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(''); 

More info on innerHTML from MDN

Answer 3

사용 .innerHTML에서 그것을 좋아하면 더 jQuery를이

Answer 4

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/

당신은이 경우에 jQuery를 사용할 수