有没有任何库可以使从字符串创建元素变得容易？

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 库可以让这变得更容易？
注意：请不要使用 jQuery

Answer 1

我经常作弊。

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

Answer 2

由于如果 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/

Answer 3

如果你想用纯 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'

问候:)

Answer 4

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

来自 MDN 的有关 innerHTML 的更多信息