您可以实例化一个 Element 对象并同时定义属性吗？答案

【问题标题】：Can you instantiate an Element object AND define attributes simultaneously?您可以实例化一个 Element 对象并同时定义属性吗？
【发布时间】：2014-10-14 18:17:09
【问题描述】：

在某些人看来，这可能是一个愚蠢的问题。简短的背景是；我被临床诊断为强迫症，因此我对代码的格式和整洁度非常挑剔，所以我提前道歉。这引出了我的问题：

在 javascript 中有没有办法实例化一个对象并在一个块中定义它的属性？我的目标可能有点类似于您看到 JSON 对象/字符串的方式

这是一些伪代码/格式：

var preElement = document.createElement('pre')
    .className = "nodeResults";
    .innerHTML = formattedResponse;
    .style = "blahblah";
    .anymoreAttributes = "stuff";

无关紧要，我知道。我只是注意到我花了 30 分钟研究这个而不是编写函数代码。强迫症的垮台。所以请帮助我；这可能是是还是不是？

真诚地，浪费时间

【问题讨论】：

可能，是的，但不是那样。 DOM 函数不返回元素。你必须自己做帮手。
不是开箱即用的。只需创建一个函数，该函数接收元素类型的字符串和属性的对象。 create("pre", {className:"nodeResults", ... });
...或创建一个以对象格式接受整个结构的结构。我就是做这个的。我使用的格式类似于 JSONML。 ["div", {id: "foo"}, ["span", {className: "bar"}]]

标签： javascript dom formatting element

【解决方案1】：

除非您编写一个类包装器来处理这种格式，否则这是不可行的，或者使用 jQuery 库。 jQuery 示例：

var preElement = $(document.createElement('pre'))
    .addClass("nodeResult")
    .html(formattedResponse)
    .css(jsonFormattedCSS)

jsFiddle 示例：http://jsfiddle.net/3h5kfv2j/

这也可以在 vanilla javascript 中实现，但您需要找到一个库来执行此操作或自己编写代码。

这是我刚刚制作的一些普通实现的示例代码：http://jsfiddle.net/4n4w3uqr/

【讨论】：

不错！这就回答了这个问题。由于我已经在使用 jQuery，这很棒！