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/

演示

文档创建完整元素

1 个答案: