JavaScript / DOM-给新创建的元素一个ID

Question

How can I apply an element ID to a newly created element through JavaScript DOM?

The code I have written creates a table which is triggered from a button.

I need to apply a unique ID to this table so it can be styled differently to others which appear on my site.

Here is a sample of my code:

var tab = document.createElement("ViewShoppingCart");
document.getElementById("shopping_list").appendChild(tab);

var tbdy = document.createElement("tbody");
tab.id = "new_cart";
tab.appendChild(tbdy);
new_cart = true;

var total = 0;

for (var a = 0; a <= nameArray.length-1; a++) {

var tr = document.createElement("tr");
tbdy.appendChild(tr);

var td = document.createElement("td");
    td.appendChild(document.createTextNode("x " + quantityArray[a]));
    tr.appendChild(td); 

var td2 = document.createElement("td");
    td2.appendChild(document.createTextNode(nameArray[a]));
    tr.appendChild(td2);

var td3 = document.createElement("td");
    td3.appendChild(document.createTextNode(sumArray[a]));
    tr.appendChild(td3);

}

Answer 1

Try

var tbdy = document.createElement("tbody");
tbdy.id = "newtbodyid";
tab.id = "new_cart";
tab.appendChild(tbdy);
new_cart = true;

Answer 2

For applying styles consider using class selectors, you may not need IDs at all.

Note that if you want to create valid HTML you can't have duplicated IDs that significantly lessens value for CSS styles, especially for table data.