javascript - 文档创建完整元素

Question

我正在制作一个小应用程序，它必须使用以下代码将 3 个元素附加到另一个元素:

var MyElem1= document.createElement("div");
ParentElem.appendChild(MyElem1);

这工作得很好，但我想知道是否有办法创建一个完整的元素，例如:

var MyElem1= document.createElement('<div style="some-styling: here;">Some InnerHtml Here</div>');
    ParentElem.appendChild(MyElem1);

我知道我可以在创建元素后将这些属性添加到元素中，但我希望有一种方法可以像这样内联执行此操作(可以跨浏览器工作的东西)。

我在 W3Schools 上看到(是的，我知道我应该停止使用它)createElement 函数仅需要元素类型(div、span、button 等...)。

Answer 1

您可以创建一个虚拟容器，并通过替换其 innerHTML 属性，然后获取 .firstChild，在其中创建您想要的所有元素。

这是一个可重用的函数

var elementFactory = (function (){
   var dummy = document.createElement('div');

   return function(outerHtml){
       var node;
       dummy.innerHTML = outerHtml;
       node = dummy.firstChild;
       dummy.removeChild(node);
       return node;
   }
})();

像这样使用它

var MyElem1 = elementFactory('<div style="some-styling: here;">Some InnerHtml Here</div>'),
    MyElem2 = elementFactory('<div style="some-other-styling: here;">Some Other InnerHtml Here</div>');

演示地址:http://jsfiddle.net/5De3p/1/