Which one should i use?

I wanted to append data in table so i used both the following methods , both are working fine.
which one is good?
Method 1:

let td1=document.createElement('td');
        let td2=document.createElement('td');
        let td3=document.createElement('td');
        let td4=document.createElement('td');

        tr.append(td1);
        tr.append(td2);
        tr.append(td3);
        tr.append(td4);
    
        td1.innerText=expense.value;
        td2.innerText=date.value;
        td3.innerText=amount.value;
        td4.append(delete_button);

Method 2:

for(let i=1;i<=4;i++){
            let td=document.createElement('td');
            tr.append(td);
        }
        tr.firstChild.innerText=expense.value;
        tr.firstChild.nextSibling.innerText=date.value;
        tr.lastChild.previousSibling.innerText=amount.value;
        tr.lastChild.append(delete_button);

I would use this, changing td.innerText in the loop before appending, if you have the text to add in an array or object or something

1 Like

Thanks for the suggestions , I made the changes.

let arr=[];

        arr[0]=expense.value;
        arr[1]=date.value;
        arr[2]=amount.value
        arr[3]="";

        table_body.firstElementChild.setAttribute('class','nodisplay');

        let tr=document.createElement('tr');
        let delete_button=document.createElement('input');

        table_body.append(tr);
       
        for(let i=0;i<4;i++){
            let td=document.createElement('td');
            tr.append(td);
            
            td.innerText=arr[i];
        
        }

        tr.lastChild.append(delete_button);