来自标签源的 Javascript DOM 文档 createElement答案

【问题标题】：Javascript DOM Document createElement from tag source来自标签源的 Javascript DOM 文档 createElement
【发布时间】：2012-03-02 00:09:19
【问题描述】：

有没有办法从标签源在 Document 对象中创建一个新元素？基本上我想做的事情是：

myDocument.createElement('<sometag attr="lol">');

【问题讨论】：

标签： javascript xml dom document

【解决方案1】：

不，.createElement 的原生 DOM API 不支持该语法。您需要创建普通元素并直接在对象上设置任何属性

newElem.attr = "lol";

或者（更好），使用.setAttribute()

newElem.setAttribute( 'attr', 'lol' );

~~你“可以”做的是创建一个documentFragment，然后使用.innerHTML将该字符串写入该片段，最后将.append其内容写入其目标目的地。~~

【讨论】：

看起来像setAttribute() is slower than .attr :-)
@FlorianMargaine：很有可能。但需要注意的是，到目前为止，任何规范都没有描述这种语法。所以它的编码风格非常模糊。无论如何，似乎几乎所有浏览器都“以某种方式”支持该语法。所以，这取决于你。

【解决方案2】：

好吧，使用 innerHTML 而不是尝试破解 dom 操作来处理这类事情。

为此，如果需要，请使用 dom 创建一个有效节点（或通过 getElementById 获取），然后使用您的代码设置此节点的 innerHTML

【讨论】：

【解决方案3】：

innerHTML 属性在这里有效 - 但有时将其放置在您想要的位置有点困难。例如：

var div = document.createElement('div');
div.innerHTML = "<img src='http://www.google.com/logos/classicplus.png'/>";

以我的拙见，使用 jQuery 为您处理它要容易得多，因为它附带了所有已附加的 jQuery 方法。

var div = $("<div class='blah'><img src='http://www.google.com/logos/classicplus.png'/></div>");
div.find('img').hide();
div.appendTo('body');
div.find('img').fadeIn();

【讨论】：