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字符串由兄弟姐妹组成，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/

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

More info on innerHTML from MDN

是否有任何库使字符串创建元素容易？

4 个答案: