有没有一个库可以方便地从字符串创建元素？

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............  
............  

这真的很无聊，有没有一些JavaScript库可以让这变得更容易？
注意：请不要使用jQuery。

- wong2

---

你可以在这种情况下使用Jquery，通过将字符串传递给$()函数，你可以创建一个Jquery对象。 - Ehtesham

那么除了jQuery，你可以使用任何JS库吗？有什么原因吗？ - James Allardice

那么你的问题就不应该是“有没有任何JS库可以使这更容易？” :) - Sandeep G B

@wong2，ASP.NET AJAX 可以吗？它有一个 createElementFromTemplate() 方法，虽然有点冗长，但仍比手动创建整个元素结构要好。 - Frédéric Hamidi

然后只需使用 innerHTML，它在几乎所有浏览器中都可以工作，甚至是HTML5标准。http://www.w3.org/TR/html5/apis-in-html-documents.html#innerhtml - Yoshi

Answer 1

我经常作弊。

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

- Tom van der Woerdt

Answer 2

如果HTML字符串由兄弟节点组成，Tom的解决方案将不起作用。我会使用类似以下的方法：

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/

- Yoshi

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'

致敬 :)

- Marwan

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的信息

- N3dst4