使用 jQuery 创建元素答案

【问题标题】：Create Element using jQuery使用 jQuery 创建元素
【发布时间】：2021-08-29 12:03:50
【问题描述】：

我正在尝试使用 jQuery 从一个数组中创建一个 JS 中的 HTML 元素，该数组包含一个带有元素标记、类和其他属性或样式的数据对象。

let array = [{el:'div',class:'card',attr:{id:'abc'},css:{display:'block'}}];
let array2 = [{el:'div'}]
const element = (array) => {
    let el = [];
    Object.values(array).forEach((val)=>{
      el.push($(`<${val.el}>`).addClass(val.class).attr(val.attr).css(val.css))
    })
    return el;
}
element(array) // Works fine;
element(array2) //Throws error because we are not feeding any value to .addClass ...

当数组中的所有键都可用时，它可以正常工作，但当其中任何一个键丢失时，它就不起作用。

错误 > 未捕获的类型错误：无法读取未定义的属性“nodeType”

我该如何解决这个问题？谢谢

【问题讨论】：

array 是语法错误。请修正你的例子。
“忽略拼写错误” - 不。修复它们。
您问题中的脚本没有抛出上述错误（修复语法错误后）：jsfiddle.net/ycs8k05r
@Andreas 试试这个array = [{el:'div'}] 你会得到错误。我已经用适当的数组语法对其进行了测试。
是的，我会得到一个错误。但不是你问题中提到的那个。请解决您的问题，以便它 a) 完全有效并且 b) 引发您提到的错误

标签： javascript html jquery

【解决方案1】：

您所需要的只是将 tagName el 与其他 Object 数据解耦并返回那个 jQuery Element 实例 Object $:

const $element = ({el, ...rest}) => $(`<${el}/>`, rest);

const el1 = {el:'div', class:'card', id:'abc', text:"Hello", css:{color:'red'}, appendTo: "body"};
const el2 = {el:'span', class:'test', text:" World!", css:{color:'blue'}, appendTo: "body"};

const $el1 = $element(el1);
const $el2 = $element(el2);

$el1.css({fontSize: "2em"});

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;

来自DOCS

从 jQuery 1.8 开始，任何 jQuery 实例方法（jQuery.fn 的一个方法）都可以用作传递给第二个参数的对象的属性：

$("<tagName/>", {properties})

对于数据数组，以下是如何通过简单地将函数 $element 作为 Array.prototype.map() 参数传递来返回 jQuery 实例数组：

const $element = ({el, ...rest}) => $(`<${el}/>`, rest);

const els = [
  {el:'div', class:'card', id:'abc', text:"Hello", css:{color:'red'}, appendTo: "body"},
  {el:'span', class:'test', text:" World!", css:{color:'blue'}, appendTo: "body"}
];

const $els = els.map($element);
console.log($els);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

谢谢@RokoC.Buljan；现在问题解决了。 :)
我正在尝试将子元素附加到 $newElement;这是我的尝试，你能告诉我哪里做错了吗？ link
@ANOLGHHOSH 您需要在该数组集合上递归调用相同的函数 - 无论多深。
@ANOLGHOSH 查看此答案及其示例：Convert JSON to Elements tree
Okey Jsfiddle link 正在运行，有一个可忽略的问题，希望您检查我的代码并指导我。

【解决方案2】：

您编写了错误的语法来访问对象项值。尝试下面提到的代码直接访问对象值

let stringfyObject=JSON.parse(JSON.stringify(array));
       
el.push((`<${stringfyObject.el}>`).addClass(stringfyObject.class).attr(stringfyObject.attr).css(stringfyObject.css));

【讨论】：

如果数组包含多个元素怎么办？
为什么用JSON.parse(JSON.stringify())“克隆”数组？这有什么变化？
变量stringifyObject的名称不正确。它是一个字符串或一个对象。但绝对不是两者兼而有之。
作者编辑了它的第一个版本的代码
@ANOLGHOSH 在第一个版本的共享源代码中包含一个对象而不是数组...