給PARAMS通過使用document.createElement

Question

創建一個div我想用一個for loop，我不喜歡這樣

for(let i = 0; i < data.length; i++) { 
    let divs = document.createElement('div'); 
    divs.className = 'button'; 
    divs.data-id = (data[i]).id;     // error 
    document.body.appendChild(divs); 
} 

現在我的問題是，data-id需要創建多個div，但它會彈出一個錯誤。那麼我該如何定義data-id動態

我也試着給整個div作爲另一個div的innerHTML，但它不會渲染。那麼這怎麼解決？

Answer 1

使用setAttribute()代替：

divs.setAttribute('data-id' , data[i].id); 

還要注意，連字符沒有在Javascript標識符允許，他們將被解析爲減法。

Answer 2

for(let i = 0; i < data.length; i++) { 
    let divs = document.createElement('div'); 
    var attr = document.createAttribute('data-id'); 
    attr.value = (data[i]).id; 
    divs.setAttributeNode(attr); 
    document.body.appendChild(divs); 
} 

Answer 3

您正在尋找divs.setAttribute('data-id', data[i].id);。

如果你想讀一個時髦人物的屬性，如您的例子，破折號，你會用方括號，而不是點符號訪問，並引用屬性，像這樣：divs.attributes['data-id']

Answer 4

這應該工作：

for(let i = 0; i < data.length; i++) { 
    let divs = document.createElement('div'); 
    divs.setAttribute("id", "btn_id"); 
    divs.setAttribute("class", "btn_class"); 
    divs.setAttribute("data-id", (data[i]).id); 
    document.body.appendChild(divs); 
} 

或者使用jQuery選擇：

var newDiv= $('<div/>', { id: 'foo', class: 'tclose'})