是否有任何庫使得從字符串創建元素變得容易？

我需要從這個網站字符串創建一個元素：是否有任何庫使得從字符串創建元素變得容易？

<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，請

來源

2011-11-28 wong2

可以在這種情況下，使用jQuery你可以通過將字符串傳遞給'$（）'函數來創建Jquery對象。 – Ehtesham

抱歉，我無法在此項目中使用jQuery – wong2

那麼您可以使用jQuery以外的任何JS庫嗎？背後的任何理由？ –

我經常作弊。

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

來源

2011-11-28 12:47:39

這真的很不錯！ – wong2

我可以建議如下的功能，如果你想它在純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'

問候:)

來源

2011-11-28 11:41:43 Marwan

使用.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('');

More info on innerHTML from MDN

來源

2011-11-28 12:45:58 N3dst4

彷彿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/

來源

2011-11-28 14:36:47 Yoshi

是否有任何庫使得從字符串創建元素變得容易？

回答

相關問題