使用 jQuery 動態創建 HTML 元素

Question

I am trying to create an HTML element in JS using jQuery from an array that contains an Object of data with element tag, class, and other attributes or style.

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”

我該如何解決？ 謝謝

Answer 1

您只需將 tagName el與其他 Object 數據解耦並返回jQuery元素實例 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>

來自文檔

從 jQuery 1.8 開始，任何 jQuery 實例方法（jQuery.fn 的一個方法）都可以用作傳遞給 ZA66CFDE6331C4BEB26 的第二個參數的屬性：

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

對於數據數組，以下是如何通過簡單地將 function $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

您編寫了錯誤的語法來訪問 object 項目值。 嘗試下面提到的代碼直接訪問 object 值

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