文档创建完整元素

Document Create Full Element

本文关键字：元素 创建 文档      更新时间：2023-09-26

我正在制作一个小应用程序，它必须通过使用以下代码将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等)。

您可以创建一个虚拟容器，并通过替换其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/演示

相关文章：