Question

使用 jQuery 动态创建 HTML 元素

2021-08-29

292

javascript html jquery

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

为什么使用 jQuery 而不是 HTML？

您可以考虑在 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 ...

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

Error > Uncaught TypeError: Cannot read property 'nodeType' of undefined

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

Answer 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"});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

来自 DOCS

As of jQuery 1.8, any jQuery instance method (a method of jQuery.fn) can be used as a property of the object passed to the second parameter:

$("<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);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Answer 2

You have written the wrong syntax to access object item values. try below-mentioned code to access object values directly

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